在Internet Explorer中获取SVG子元素属性 [英] get SVG child element attributes in Internet Explorer

问题描述

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

I want to retrieve declared SVG attributes programmatically. It's all inline content, something like this:

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

听起来很容易，对吗?但是我撞墙了.我已阅读此，但对于入门者:

Sounds easy peasy, right? But I'm hitting a wall. I've read this, but for starters:

document.getElementsByTagName('path');

似乎在IE中不起作用，这是主要的问题所在.它总是返回undefined.

doesn't seem to work in IE, which is the major trouble spot. It always returns undefined.

(我知道 IE仅支持脚本动画，整个场合.)

(I am aware that IE only supports scripted animation, that's the whole occasion for this.)

无论如何，"get"部分在Chrome中有效，但是在开发工具中登录此Nodelist时，控制台将返回无益的

Anyways, the "get" part works in Chrome, but when this Nodelist is logged in Dev Tools the console returns an unhelpful

[object Nodelist]

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

and when I log individual paths I get a similar:

[object Text]

它与IE太相似，而不是通常的详细javascript对象，因此很难说出实际情况.最后，当我尝试检索动画的声明属性时:

which is all too similar to IE, and not the usual detailed javascript object, making it hard to tell what's happening under the hood. Lastly, when I try to retrieve the declared attributes of the animation:

.getAttributeNS(null, 'dur')

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

doesn't seem to work either, even in Chrome. Dev Tools says that the path object text has no 'getAttributeNS' method. Ditto for plain old 'getAttribute'. I've also tried ".contentDocument" on the SVG file but that doesn't work either. Basically, I have no trouble at all setting these values in any browser a la:

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

我似乎无法获取.任何指导表示高度赞赏.

I just can't seem to get them. Any guidance highly appreciated.

P.S. jQuery选择器不适用于SVG元素，此外，我宁愿不必加载库来解决这一小问题.

P.S. jQuery selectors don't work on SVG elements, and besides I'd rather not have to load a library to address this one little issue.

P.P.S.我正在遍历大量路径，因此建议为每个元素设置唯一ID的答案在这种情况下无济于事.我想按名称获取元素.跨浏览器是最好的，但是它必须可以在IE中工作...

P.P.S. I'm iterating over an enormous quantity of paths, so answers that suggest setting unique IDs for each element aren't helpful in this case. I want to get the elements by name. Cross-browser is best, but it must work in IE...

推荐答案

getElementsByTagName和SVG的getAttribute元素似乎可以在IE上正常工作. Perharps您正在尝试从path元素而不是animate元素获得'dur'属性吗?还是从路径"元素的文本节点开始?

The getElementsByTagName and SVG's getAttribute elements seems to work fine with IE. Perharps you are trying to get the 'dur' attribute from the path element instead of from the animate element? Or else, from a text node of the 'path' element?

SVG对于文本节点非常严格.例如，如果您的路径是这样定义的:

SVG is quite strict regarding text nodes. For instance, if your path is defined like that:

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

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

It will consider that the first child of the 'path' element is a text node, while the second is the 'animate' you want. Thus, the following code should work

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

但是，如果您定义的所有内容在"path"和"element"之间都没有空格:

However, if you define everything without any space between 'path' and 'element':

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

然后，动画将成为"path"的第一个子代，以下代码将正常运行:

Then the animate will be the first child of 'path' and the following code will run ok:

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

PS:此动画"不会执行任何操作，因为它不完整

PS: this 'animate' will do nothing, as it is incomplete

这篇关于在Internet Explorer中获取SVG子元素属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！