Question

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');

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

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

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]

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')

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 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. 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…

Answer 1

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 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

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