在Internet Explorer中获取SVG子元素属性

Question

我希望能够通过程序检索已声明的SVG属性。所有内容都是内联的，类似于以下内容：

<svg>
<path d="###########">
    <animate from="5" to="0" begin="3s" dur="1s" etc etc>
</path>
</svg>

听起来非常简单，对吧？但我遇到了难题。我已经阅读了 这个网站，但是首先：

document.getElementsByTagName('path');

这段代码在IE浏览器中似乎无法工作，这是主要的问题点。它总是返回undefined。

（我知道IE仅支持脚本动画，这就是这个问题的全部原因。）

无论如何，在Chrome浏览器中，“get”部分都可以正常工作，但是当在Dev Tools中记录此Nodelist时，控制台会返回一个没有帮助的消息。

[object Nodelist]

当我记录每个路径时，我得到了类似的输出：

[object Text]

这段代码与IE非常相似，而不是通常的详细JavaScript对象，这使得很难了解底层发生了什么。最后，当我尝试检索动画声明的属性时：

.getAttributeNS(null, 'dur')

似乎在Chrome中也不起作用。开发工具显示路径对象文本没有“getAttributeNS”方法。普通的“getAttribute”也一样。我还尝试了SVG文件上的“.contentDocument”，但也没有起作用。基本上，我完全没有问题以这种方式在任何浏览器中设置这些值：

animation.setAttributeNS(null,'begin',startTimeRounded + 's');

我似乎无法获取它们。非常感谢任何指导。

附言：jQuery选择器在SVG元素上不起作用，而且我不想加载库来解决这个小问题。

附言2：我正在迭代大量路径，因此建议为每个元素设置唯一ID的答案在这种情况下并不有用。我想通过名称获取元素。最好是跨浏览器的，但必须在IE中工作...

- Ben

---

[object Text] 是一个文本节点，它没有属性（不要与[object SVGTextElement]混淆）。您是否在查看正确的节点？ - gilly3

Answer 1

getElementsByTagName和SVG的getAttribute元素在IE中似乎可以很好地工作。也许您正在尝试从路径元素而不是从动画元素获取'dur'属性？否则，是从“路径”元素的文本节点获取的吗？

SVG对文本节点非常严格。例如，如果您的路径定义如下：

<path d="M 0 0 L 10 5 L 0 10 z" >
  <animate from="5" to="0" begin="3s" dur="1s">
</path>

它将认为“path”元素的第一个子元素是文本节点，而第二个子元素是您想要的“animate”。因此，以下代码应该有效。

var paths = document.getElementsByTagName('path');
alert(paths[0].childNodes[1].getAttribute("dur")); //first path, second node ('animate'), the dur attribute

然而，如果您在“path”和“element”之间没有任何空格定义所有内容：

<path d="M 0 0 L 10 5 L 0 10 z" ><animate from="5" to="0" begin="3s" dur="1s"></path>

那么，动画将成为“路径”的第一个子元素，下面的代码将正常运行：

var paths = document.getElementsByTagName('path');
alert(paths[0].childNodes[0].getAttribute("dur")); //now we can get the first child, as expected

注意：此处的“animate”功能不完整，无法生效

- João Pimentel

---

就是这样。我对路径的<set>和<animate>子元素进行了制表符缩进，以提高可读性，这就创建了空文本节点，这是所有混淆的根源。删除元素之间的所有空格可以解决问题。吸取教训。谢谢João！ - Ben