Following CSS-Tricks guide on SVG sprites I've done a SVG sprites file that have inside several symbol elements with animate elements that can trigger an animation when the beginElement() function is run on them.
This works well when I insert the svg in my HTML, but I want to caché this SVG. I've follow the CSS-Trick Guide on Ajaxing this SVG Sprites and I'm loading this SVG dinamically, but after load I've not been able to access the DOM of the SVG to run the beginElement() function.
The problem is that the contentDocument attribute is null in the loaded SVG. I've found that there's an ownerDocument attribute with the DOM, but it looks like it's read-only. When I try to run beginElement() nothing happens.
You can see the problem in this fiddle:
https://jsfiddle.net/kumiau/2hx5gnc6/2/
I've found this problem reported in other SO threads (1) but they boild down to two main problems:
file://protocol, but I'm running this on a server.- External domain file, but I'm loading my SVG from the same domain.
- SVG not loaded, but I'm running my code after the SVG is downloaded.
