Get SVG child attributes from markup
I want to programmatically display the declared SVG attributes. This is 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, doesn't it? But I hit the wall. I read this one , but first:
document.getElementsByTagName('path');
doesn't seem to work in IE, which is the main issue. It always returns undefined.
(I know IE only supports scripted animation , which is the whole reason for it.)
Anyway the "get" part works in Chrome, but when this Nodelist is registered with Dev Tools, the console returns useless
[object Nodelist]
and when I register the individual paths I get a similar one:
[object Text]
which looks too much like IE and not a normal verbose javascript object, making it difficult to figure out what's going on under the hood. Finally, when I try to get the animation's declared attributes:
.getAttributeNS(null, 'dur')
doesn't seem to work, even in Chrome. Dev Tools says the text of the path object does not have a getAttributeNS method. Same for plain old getAttribute. I also tried ".contentDocument" on the SVG file, but that doesn't work either. Basically, I have no problem setting these values in any browser a la:
animation.setAttributeNS(null,'begin',startTimeRounded + 's');
I just can't get them. Any guidance is much appreciated.
PS jQuery selectors don't work with SVG elements, and besides, I wouldn't have to load the library to solve this little problem.
PPS I am repeating a huge number of paths, so answers suggesting setting unique IDs for each item do not help in this case. I want to get items by name. Cross browser is better, but it should work in IE ...
source to share
The getElementsByTagName and SVG getAttribute seem to work fine with IE. Perharpy are you trying to get the "dur" attribute from the path element and not from the animated element? Or else, from the text node of the "path" element?
SVG is pretty strict about text nodes. For example, if your path is defined like this:
<path d="M 0 0 L 10 5 L 0 10 z" >
<animate from="5" to="0" begin="3s" dur="1s">
</path>
It will assume that the first child of the "path" is the text node, and the second is the "animation" you want. So 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
However, if you define everything with no spaces 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 animate will be the first child of the "path" and the following code will work fine:
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 since it is incomplete
source to share