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

我想以编程方式检索声明的SVG属性。这是所有内联内容，如下所示：从标记中获取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，这是这个整体的场合。）

不管怎么说，“获取”的一部分在Chrome的工作，但是当这个节点列表中的开发工具登录控制台返回无益

[object Nodelist]

，当我登录各个路径我得到一个类似：

[object Text]

这一切都太相似，IE浏览器，而不是通常的详细的JavaScript对象，很难说出底下发生了什么。最后，当我尝试检索动画的声明属性时：即使在Chrome中，也可能无法正常工作：

.getAttributeNS(null, 'dur')

也似乎不起作用。开发工具表示路径对象文本没有'getAttributeNS'方法。同样是普通的'getAttribute'。我也尝试过SVG文件中的“.contentDocument”，但这也不起作用。基本上，我有所有在任何浏览器阿设置这些数值没有问题：

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

我不能似乎得到他们。任何指导高度赞赏。

P.S. jQuery选择器不适用于SVG元素，除此之外，我宁愿不需要加载库来解决这个小问题。

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

来源

2012-04-02 Ben

'[object Text]'是一个文本节点，它没有属性（不要与[object SVGTextElement]混淆）。你在看正确的节点吗？ – gilly3 2012-04-03 00:04:47

getElementsByTagName和SVG的getAttribute元素似乎在IE中正常工作。 Perharps你试图从路径元素而不是从animate元素中获得'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>

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

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>

那么动画将是“路径的第一个孩子“和下面的代码将确定运行：

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

PS：这个‘动画’不会做任何事情，因为它是不完整的

来源

2012-04-03 00:19:39

就是这样。我用缩进的方式标记了和儿童的可读性，并且创建了空白文本节点，这是所有混淆的根源。删除元素之间的所有空间可解决问题。学过的知识。谢谢João！ – Ben 2012-04-04 20:06:45

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

回答

相关问题