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，因此如果您希望它可以移植，您可能需要坚持检查问题中建议的元素实例。

SVG childNodes返回文本

1 个答案: