createSVGPoint不是函数吗? [英] createSVGPoint is not a function?
问题描述
我需要获取< svg> 元素的SVGPoint，但是由于某种原因，它在我的情况下不起作用.
I need to get the SVGPoint of an <svg> element but for some reason, it doesn't work in my scenario.
考虑以下HTML
<body>
<svg id="inline">
</svg>
</body>
还有javascript
And the 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中显示错误:
The first "point" gets outputtet as expected but the "point2" output prints an error in chrome:
Uncaught TypeError: s2.createSVGPoint is not a function
我创建了一个小矮人来演示:
I've created a small plunker to demonstrate:
http://plnkr.co/edit/fh9kEppA4lR5hY7eA22x?p=preview
推荐答案
好吧，我知道出了什么问题.动态创建SVG元素时，您需要告诉浏览器它与常规" html元素具有不同的名称空间.我需要创建这样的元素:
Ok i figured out what was wrong. When creating an SVG element dynamicly, you need to tell the browser that it is of a different namespace than the "normal" html elements. I need to create the element like this:
document.createElementNS('http://www.w3.org/2000/svg', 'svg');
当您内联编写HTML时，浏览器会以某种方式理解并推断出正确的名称空间.
When you write the HTML inline, the browser somehow understands and infers the correct namespace.
如果您喜欢我，在Angular2上遇到此问题，那么当前(alpha 38-alpha44)存在一个错误，该错误阻止svg元素的正确创建，这实际上是我的问题的根源.如果您也因为该错误而在这里，请查看以下内容: https://github.com/angular/angular/issues/4506
If you like me, encountered this working with Angular2, there is currently (alpha 38-alpha44) a bug that prevents svg elements from getting created correctly, which is actually the root of my problem. In case you're also here because of that bug, check this out: https://github.com/angular/angular/issues/4506
这篇关于createSVGPoint不是函数吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
