javascript 从标记中获取 SVG 子元素属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9985314/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
get SVG child element attributes from markup
提问by Ben
I want to retrieve declared SVG attributes programmatically. It's all inline content, something like this:
我想以编程方式检索声明的 SVG 属性。都是内嵌的内容，像这样：
<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');
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.)
（我知道IE 只支持脚本动画，这就是整个场合。）
Anyways, the "get" part works in Chrome, but when this Nodelist is logged in Dev Tools the console returns an unhelpful
无论如何，“get”部分在 Chrome 中有效，但是当这个 Nodelist 登录到 Dev Tools 时，控制台返回一个无用的
[object Nodelist]
and when I log individual paths I get a similar:
当我记录单个路径时，我得到类似的信息：
[object Text]
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:
这与 IE 非常相似，而不是通常详细的 javascript 对象，因此很难说出幕后发生的事情。最后，当我尝试检索动画的声明属性时：
.getAttributeNS(null, 'dur')
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 settingthese values in any browser a la:
似乎也不起作用，即使在 Chrome 中也是如此。开发工具说路径对象文本没有“getAttributeNS”方法。同样适用于普通的“getAttribute”。我也在 SVG 文件上尝试过“.contentDocument”，但这也不起作用。基本上，我在任何浏览器中设置这些值都没有问题：
animation.setAttributeNS(null,'begin',startTimeRounded + 's');
I just can't seem to getthem. Any guidance highly appreciated.
我似乎无法得到它们。高度赞赏任何指导。
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.
PS jQuery 选择器不适用于 SVG 元素，此外我宁愿不必加载库来解决这个小问题。
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...
PPS 我正在迭代大量路径，因此建议为每个元素设置唯一 ID 的答案在这种情况下没有帮助。我想按名称获取元素。跨浏览器是最好的，但它必须在 IE 中工作......
回答by Jo?o Pimentel
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?
getElementsByTagName 和 SVG 的 getAttribute 元素似乎在 IE 中运行良好。Perharps 您试图从 path 元素而不是 animate 元素获取“dur”属性？或者，来自“路径”元素的文本节点？
SVG is quite strict regarding text nodes. For instance, if your path is defined like that:
SVG 对文本节点非常严格。例如，如果您的路径定义如下：
<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
它会认为 'path' 元素的第一个子元素是一个文本节点，而第二个是你想要的 'animate'。因此，以下代码应该可以工作
var paths = document.getElementsByTagName('path');
alert(paths[0].childNodes[1].getAttribute("dur")); //first path, second node ('animate'), the dur attribute
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>
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: this 'animate' will do nothing, as it is incomplete
PS：这个“动画”不会做任何事情，因为它是不完整的
