javascript - SVG 子节点返回文本

Question

我有一个内联 SVG 并尝试遍历组元素中的所有路径。使用 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;

children 对象现在包含 5 条目，即使我的测试组只有 2 路径。

注意:我知道我可以遍历所有条目并检查我是否有一个 SVGPathElement 实例，但这对我来说似乎很麻烦。

(我已经在最新的 Chrome 和 Firefox 中测试过了)

Answer 1

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

您可以使用 element.children 跳过文本但这显然只适用于 Firefox 和 Chrome，所以如果你想以可移植的方式完成它，你可能需要坚持检查问题中建议的元素实例。