JavaScript和SVG：错误createElement（）

所以，我有一个SVG文档，没有HTML什么的，以及在<defs>...</defs> - 部分我有我的JavaScript。其中有一个函数可以创建椭圆弧（尽管我只会将它用于圆弧，在本例中，仅用于圆），另一个函数使用前一种方法创建圆。这可能不是目前最优雅的方式，但我会稍后考虑...JavaScript和SVG：错误createElement（）

但是，在尝试通过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");

来源

2012-12-30 Tuhn

使用'document.createElement'而不是'SVGObj.createElement' –

谢谢，工作！我现在看不到它，但至少错误消失了......再次感谢！ – Tuhn

您需要使用document.createElementNS('http://www.w3.org/2000/svg', 'path')创建在SVG命名空间的路径元素。

来源

2012-12-30 16:39:38

JavaScript和SVG：错误createElement（）

回答

相关问题