12

Based on this code, I'm trying to animate a dynamically-generated SVG element:

var svgnode = document.createElementNS('http://www.w3.org/2000/svg','svg');
var circle = document.createElementNS('http://www.w3.org/2000/svg','circle');
circle.setAttribute("cx", "10");
circle.setAttribute("cy", "10");
circle.setAttribute("r", "10");
circle.setAttribute("fill", "blue");
var ani = document.createElementNS("http://www.w3.org/2000/svg","animateTransform");
ani.setAttribute("attributeName", "transform");
ani.setAttribute("attributeType", "xml");
ani.setAttribute("type", "translate" );
ani.setAttribute("from", "10");
ani.setAttribute("to", "100");
ani.setAttribute("begin", "0s");
ani.setAttribute("dur", "2s");
ani.setAttribute("fill", "freeze");
circle.appendChild(ani);
svgnode.appendChild(circle);
document.getElementById('mydiv').appendChild(svgnode);

the SVG shows up fine, but the animation doesn't work. If I write the equivalent code in plain HTML/SVG it works. I'm using Chrome.

Community
  • 1
  • 1
Hendekagon
  • 4,405
  • 2
  • 25
  • 42

4 Answers4

6

It would not work if added dynamically later on chrome (would work with FF).

see http://jsfiddle.net/tap0ri/SF5nE/2/

this is seems to be chrome bug.

Chetan
  • 1,457
  • 1
  • 12
  • 15
  • yes, this is very annoying because it means you can't trigger animations in response to messages from a server – Hendekagon Jan 06 '12 at 04:33
  • I tried hack with creating somekind of "svg pool" on document.ready and I would use any svg for dynamically adding elements inside it. – Chetan Jan 11 '12 at 06:43
  • ah so if the SVG element is create on document load then later added animate elements do work, but if the SVG element is later added then it doesn't? – Hendekagon Jan 18 '12 at 02:58
  • Yes, I have reported this issue to webkit community, but not sure when they would fix it, until then, we need this hack !! – Chetan Jan 18 '12 at 15:18
3

Definitely [Still] a bug with Chrome. Running Chrome 19.0.1084.52

This code works: http://jsfiddle.net/t3d28/

This code still does not work: http://jsfiddle.net/tap0ri/SF5nE/2/

Mark
  • 699
  • 1
  • 5
  • 3
0

I have still the same Problem 5 year's ago :) (and with svg-Filter too)

I use follow hack:

1. I set all may attributes wit setAtteribute, for example ani.setAttribute("attributeName", "transform");

2. I read and set my svg-root innerhtml: $svgRoot.html($svgRoot.html());

Hope it helps someone, or someone can tell me a better way :)

Bergi
  • 183
  • 1
  • 9
-1

Doesn't works on both navigators with viewBox="0 0 0 0".

Works here:

<div id="mydiv">
    <svg id="svgNode" version="1.1" width="100%" height="100%" viewBox="0 0 100% 100%" preserveAspectRatio="xMidYMid meet" id="ext-element-180"></svg>
</div>

see: https://jsfiddle.net/oOroBax/xkb89y4h/

blonchkman
  • 1
  • 1