SVG childNodes 返回文本

Question

我有一个内联 SVG 并尝试循环遍历组元素内的所有路径。使用时childNodes我发现浏览器text为每个路径添加一个额外的子路径。我很好奇为什么浏览器要这样做，以及是否有一种聪明的方法来循环真正的子元素。

我创建了一个小 JSBin 来演示该行为：http://jsbin.com/tutisakege/1/edit ?html,css,js,console,output

（查看控制台的输出）

超文本标记语言

<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中测试过）

Answer 1

浏览器没有添加它，它们就在文档源中。路径元素之间有空格，即回车符和空格。

您可以使用element.children跳过文本，但这显然仅适用于 Firefox 和 Chrome，因此如果您希望可移植地完成它，您可能需要坚持检查问题中建议的元素实例。