createSVGPoint 不是函数吗？答案

【问题标题】：createSVGPoint is not a function?createSVGPoint 不是函数吗？
【发布时间】：2015-10-26 08:23:16
【问题描述】：

我需要获取 <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());

第一个“point”按预期获取 outputtet，但“point2”输出在 chrome 中打印错误：

Uncaught TypeError: s2.createSVGPoint is not a function

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

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

【问题讨论】：

标签： javascript html svg

【解决方案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

【讨论】：