CODEWITHSUNDEEP
javascriptdynamicsvg
theFish
theFish

Reputation: 123

SVG <animate> not working when created dynamically using <use>

While I have found variations of this question I have not found a solution for my problem. For the sake of brevity I have the following structure...

<svg>
   <g>
     <rect></rect>
     <rect></rect>
     <rect></rect>
   </g>
</svg>

I can animate these rect elements by adding a use element beneath the rect elements within the group. However, if I try to dynamically create a use element with animation rules to insert after the rect elements and inside the group, the animation does not take place.

When reviewing in Chrome Dev Tools, I can see that the dynamically created elements are there, but the animation is not taking place.

I have tested in FF and Chrome, and neither work.

I have read that this may be a Chrome bug, but most of the threads that I read were older, and am not sure if a solution has been found yet.

When I am creating my elements I am using createElementNS. I have tried adding the FakeSmile library even though this seems to be IE specific.

I am only using JavaScript, no jQuery.

If I am not making myself clear, here is the desired result: http://codepen.io/JoeyCinAZ/pen/Hstkr and here is the non-functioning example: http://codepen.io/JoeyCinAZ/pen/GHhbw

Upvotes: 0

Views: 144

Answers (1)

Robert Longson
Robert Longson

Reputation: 124289

You are creating the <use> element with createElement when you need to use createElementNS to create the element in the SVG namespace.

Also you're trying to set the xlink attribute using setAttribute when you must use setAttributeNS to set it in the xlink namespace.

Upvotes: 2

Related Questions