Question

I am trying out some animations and transformations in an SVG image.

I am trying to translate and resize and translate a path as well as animate the rotation of it.

It appears I can only translate and resize or rotate at a time. If I try them all together then the translate and resize do not hold: if I remove the animation then they are moved and the right size.

This behavior is consistent across Linux and OSX as well as FF and Safari.

Example:

<use
    id="tengear"
    fill="#ffffff"
    stroke="#E2E2E2"
    stroke-width="3"
    transform="scale(0.40) translate(62, 180)"
    style="filter:url(#distanceBlurFar)"
    xlink:href="#tengearuse"
>
    <animateTransform
        attributeType="XML"
        attributeName="transform"
        type="rotate"
        from="0,162,280" to="360,162,280"
        begin="0s" dur="11"
        repeatCount="indefinite"
    />
</use>

This should be small and moved as well as rotating. However it is big and not moved but is rotating.

<use
    id="tengear"
    fill="#ffffff"
    stroke="#E2E2E2"
    stroke-width="3"
    transform="scale(0.40) translate(62, 180)"
    style="filter:url(#distanceBlurFar)"
    xlink:href="#tengearuse">
</use>

This one is moved and rotated but not rotating.

Can someone help me out on how to get this working?

*you will need to assume that the use and other references are valid

Full source here

Answer 1

It turns out that it was a RTFM problem.

Go to the spec and read about additive="sum" and additive="replace"

Now it reads like:

<use id="tengear" fill="#ffffff" stroke="#E2E2E2" stroke-width="2.5" transform="scale(0.25) translate(390, 360)" style="filter:url(#distanceBlurClose)" xlink:href="#tengearuse">
    <animateTransform
        attributeType="XML"
        attributeName="transform"
        type="rotate"
        from="0,390,360" to="360,390,360"
        begin="0s" dur="11"
        repeatCount="indefinite"
        additive="sum"
    />
</use>