我有一个嵌入式SVG，并尝试遍历group元素内的所有路径。使用时，childNodes我发现浏览器text为每个路径添加一个额外的子代。我很好奇为什么浏览器会这样做，以及是否存在一种聪明的方法来循环访问真正的子元素。
我创建了一个小JSBin来演示行为：http ://jsbin.com/tutisakege/1/edit?html,css,js,console, output
（检查控制台的输出）
的HTML
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 100 100">
<g id="test">
<path d="M50 0 L0 100 L100 100 Z" />
<path class="red" d="M25 0 L25 25 L75 0 L75 25 Z" />
</g>
</svg>
JS
var group = document.querySelector('#test'),
children = group.childNodes;
即使我的测试组只有2条路径，该children对象现在仍包含5个条目。
注意：我知道我可以遍历所有条目并检查是否有的实例，SVGPathElement但这对我来说似乎很麻烦。
（我已经在最新的Chrome和Firefox中对其进行了测试）
浏览器没有添加它，它们就在文档源中。路径元素之间有空格，即回车符和空格。
您可以使用element.children跳过文本，但是显然只适用于Firefox和Chrome，因此，如果您希望可移植地完成文本操作，则可能需要按照问题中的建议坚持检查元素实例。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句