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

Question

我想以编程方式检索声明的 SVG 属性。都是内联内容，像这样:

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

听起来很简单，对吧？但是我碰壁了。我读过 this ，但对于初学者:

document.getElementsByTagName('path');

似乎在 IE 中不起作用，这是主要的问题点。它总是返回未定义的。

(我知道 IE only supports scripted animation ，这就是整个场合。)

无论如何，“get”部分在 Chrome 中有效，但是当这个 Nodelist 登录到 Dev Tools 时，控制台返回一个无用的

[object Nodelist]

当我记录各个路径时，我得到类似的:

[object Text]

这与 IE 非常相似，而不是通常详细的 javascript 对象，因此很难说出幕后发生的事情。最后，当我尝试检索动画的声明属性时:

.getAttributeNS(null, 'dur')

似乎也不起作用，即使在 Chrome 中也是如此。开发工具说路径对象文本没有“getAttributeNS”方法。同上普通的旧“getAttribute”。我还在 SVG 文件上尝试过“.contentDocument”，但这也不起作用。基本上，我在任何浏览器中设置这些值都没有问题:

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

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

附言jQuery 选择器不适用于 SVG 元素，而且我宁愿不必加载库来解决这个小问题。

附言我正在遍历大量路径，因此建议为每个元素设置唯一 ID 的答案在这种情况下没有帮助。我想按名称获取元素。跨浏览器是最好的，但它必须在 IE 中工作...

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>

它将认为“路径”元素的第一个子元素是一个文本节点，而第二个是您想要的“动画”。因此，下面的代码应该可以工作

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

但是，如果您定义的所有内容在“路径”和“元素”之间没有任何空格:

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

然后动画将成为“路径”的第一个 child ，下面的代码将正常运行:

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

PS:这个“动画”什么都不做，因为它是不完整的