Question

我想以编程方式检索声明的SVG属性。这是所有内联内容，如下所示：

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

听起来很容易，对吗？但我正在撞墙。我读过this，但对于初学者：

document.getElementsByTagName('path');

似乎不适用于IE，这是主要的麻烦点。它总是返回undefined。

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

无论如何，“get”部分可以在Chrome中运行，但是当在Dev Tools中记录此Nodelist时，控制台会返回一个无用的

[object Nodelist]

当我记录单个路径时，我得到了类似的信息：

[object Text]

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

.getAttributeNS(null, 'dur')

即使在Chrome中，

似乎也无法正常工作。 Dev Tools表示路径对象文本没有'getAttributeNS'方法。同样适用于普通的旧'getAttribute'。我也在SVG文件上尝试了“.contentDocument”，但这也不起作用。基本上，我在任何浏览器中设置这些值都没有问题：

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

我似乎无法获取他们。任何指导都高度赞赏。

P.S。 jQuery选择器不适用于SVG元素，而且我不需要加载库来解决这个小问题。

P.P.S。我正在迭代大量的路径，因此建议为每个元素设置唯一ID的答案在这种情况下没有用。我希望按名称获取元素。跨浏览器是最好的，但它必须在IE中工作...

Answer 1

getElementsByTagName和SVG的getAttribute元素似乎可以正常使用IE。 Perharps你试图从路径元素而不是动画元素获取'dur'属性？或者，从'path'元素的文本节点？

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>

然后animate将成为'path'的第一个子节点，以下代码将运行正常：

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

PS：这个'animate'什么都不做，因为它不完整

从标记中获取SVG子元素属性

1 个答案: