849559 - animateTransform tag which is the direct child of a svg tag does not animate the svg in Firefox

Status: RESOLVED FIXED

(Core :: SVG, enhancement)

Description

[Swarnendu]

Attachment: test1.svg

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.160 Safari/537.22

Steps to reproduce:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" baseProfile="tiny" display="inherit" width="320" height="480" viewBox="0 0 320 480" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">    
    <rect x="0" y="0" width="200" height="300" fill="#f0f"></rect>    
    <animateTransform additive="sum" attributeName="transform" begin="2" dur="4" fill="freeze" keyTimes="0;.5;1" type="translate" values="0 0;50 50;0 0"/>   
</svg>


Actual results:

Rectangle is not animating..


Expected results:

Rect should move from (0,0) to (50,50) and again come back to (0,0)

Comment 2

[Robert Longson [:longsonr]]

Ah, the outer svg element doesn't currently have a transform attribute in SVG 1.1 see http://www.w3.org/TR/SVG/struct.html#SVGElement

However this is planned to be added as a feature in SVG 2. The SVG 2 specification is still being written though.

Comment 3

[Daniel Holbert [:dholbert]]

At the risk of stating the obvious:  <animateTransform> targets its parent. In your testcase, the parent is the <svg> node, not the <rect>. As Robert says, outer <svg> doesn't currently have a "transform" attribute, so nothing happens.

If you just want the rectangle to animate, you should put <animateTransform> before the closing "</rect>" tag.

Alternately, you can put a <g> tag just inside the <svg> -- then the animation will target the <g> and successfully move it & its children (particularly the rect) around.