Question

我需要获取<svg>元素的SVGPoint，但出于某种原因，它在我的场景中不起作用。

考虑以下HTML

<body>

  <svg id="inline">

  </svg>
</body>

和javascript

var s1 = document.getElementById('inline');
console.log('point', s1.createSVGPoint());

var s2 = document.createElement("svg");
s2.setAttribute("id", "inserted");
document.getElementsByTagName('body')[0].appendChild(s2);
console.log('point2', s2.createSVGPoint());

第一个“点”按预期输出输出，但“point2”输出在chrome中输出错误：

Uncaught TypeError: s2.createSVGPoint is not a function

我已经创建了一个小型的plunker来演示：

http://plnkr.co/edit/fh9kEppA4lR5hY7eA22x?p=preview

Answer 1

好的，我发现了什么是错的。在动态创建SVG元素时，您需要告诉浏览器它与“普通”html元素具有不同的命名空间。我需要创建这样的元素：

document.createElementNS('http://www.w3.org/2000/svg', 'svg');

当您编写HTML内联时，浏览器会以某种方式理解并推断出正确的命名空间。

如果您喜欢我，遇到这个使用Angular2，目前（alpha 38-alpha44）有一个错误，可以防止svg元素被正确创建，这实际上是我的问题的根源。如果您因为该错误而来到这里，请查看以下内容： https://github.com/angular/angular/issues/4506

createSVGPoint不是一个函数？

1 个答案: