2

したがって、私が持っているのは HTML がまったくない SVG ドキュメントであり、<defs>...</defs>-section には JavaScript があります。その中には、楕円弧を作成する関数 (ただし、円弧のみに使用し、この例では円のみに使用します) と、前者の方法を使用して円を作成する別の関数があります。それは今のところ最もエレガントな方法ではないかもしれませんが、後で調べます...

ただし、新しい要素を作成しようとするとcreateElement()、Chrome と Firefox の両方で、SVG-DOM-Object にそのメソッドが含まれていないというエラーが表示されます。

コードは次のとおりです。

var SVGObj = document.getElementById('canvas');
function Point(x, y) {
  this.x = x;
  this.y = y;
}

var ids =  new Array();
ids.nextID = nextID;
function nextID() {
  this.push(this.length);
  return this.length;
}

function hypot(pointA, pointB) {
  return Math.sqrt((pointA.x - pointB.x) * (pointA.x - pointB.x) + (pointA.y - pointB.y) * (pointA.y - pointB.y))
}

function arc(center, from, to, fill) {
  if (hypot(center, from) == hypot(center, to))
    radius = hypot(center, from);
  else 
    return false;
  var arch = SVGObj.createElement('path');
  arch.setAttribute('d', 'M ' + center.x + ',' + center.y + //Mittelpunkt
                        ' A ' + radius + ' ' + radius + //Radius
                        ' ' +  (Math.atan((from.y - center.y) / (from.x - center.x)) * 180 / Math.PI) + ' 1 0 ' + //from
                        to.x + ',' + to.y); //to
  arch.setAttribute('id', ids.nextID());
  if(fill) arch.setAttribute('style', 'fill: black');
  SVGObj.appendChild(arch);
  return true;
}

function fullCircle(center, radius, fill) {
  return arc(center, new Point(center.x + radius, center.y + radius), new Point(center.x + radius, center.y + radius), fill);
}


if(!fullCircle(new Point(100, 50), 40, true)) alert("Fehler");
4

1 に答える 1

7

document.createElementNS('http://www.w3.org/2000/svg', 'path')SVG 名前空間にパス要素を作成するために使用する必要があります。

于 2012-12-30T16:39:38.690 に答える