Question

Is there any way to make animateTransform’s transform values into relative values? Like 20%,30% other than px values.

for an example,

<animateTransform
            attributeName="transform"
            begin="0s"
            dur="3s"
            type="translate"
            from="0 -330"
            to="0 0"
            repeatCount="1" 
        />

In this code, is there any way to define the from and to values in relative values. Thanks.

Answer 1

Currently the transform attribute doesn’t accept percentages, but that’s likely going to change once CSS Transforms is defined such that it applies to svg content.

You can use a ‘by’ (instead of from-to) animation to do (non-percentage) relative values though, and you can accumulate the animation effects.

You might find the SVG Primer chapter on animation helpful for learning more about SVG animations.