How to specify the x-y rotation point when using animateTransform?

问题

I want to use animateTransform to rotate an SVG image continuously. So here we go:

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="1024px" height="768px" enable-background="new 0 0 100 100" xml:space="preserve">
    <g transform="translate(100, 100)">
        <rect fill="#FE9FFF" width="100px" height="100px">
            <animateTransform attributeName="transform" type="rotate"
                from="0" to="360" dur="20s" repeatDur="indefinite"/>
        </rect>
    </g>
</svg>

This works.

Now: I would like to change the above, so that the block rotates around its center and not its top left corner. I know that if I want to rotate the block statically around its center, I can do this:

<g transform="rotate(30, 50, 50)">
  <rect fill="#FE9FFF" width="100px" height="100px">
  </rect>
</g>

My question is - how do I manage a continuous animated rotation around the block's center? I have looked at the spec and a couple of other related questions on SO, but I'm having trouble implementing the explanations supplied.

Thanks in advance.

回答1:

http://www.w3.org/TR/SVG/animate.html#AnimateTransformElement

The ‘from’, ‘by’ and ‘to’ attributes take a value expressed using the same syntax that is available for the given transformation type:
(...)
For a type="rotate", each individual value is expressed as <rotate-angle> [<cx> <cy>]

You can specify the center for the rotation if you provide 2 additional values, cx and cy.

So, for your piece of code, I add "50 50" in the "from" and "to" attribute :

<rect fill="#FE9FFF" width="100px" height="100px">
    <animateTransform attributeName="transform" type="rotate"
        from="0 50 50" to="360 50 50" dur="20s" repeatDur="indefinite"/>
</rect>

It work with latest version of Opera, Safari and Chrome, also Firefrox 4 Beta and Batik.

回答2:

To be clear: what we are trying to achieve is rotation around a center which is itself being translated. I find that if I have an <animateTransform type=rotate>, I cannot use <animateMotion>, nor <animateTransform type=translate> to perform simultaneous translation. It (latest Chrome or Firefox) does not interpolate the center of rotation as desired, resulting in a "loop de loop" instead. However, using a simple <animate> for each of the x,y coordinates does work as desired; in this case, <animateTransform type=rotate> interpolates the center along the x,y path, as long as you set the from= parameter to the start angle, start x and start y position, and set the to= parameter to the ending values.

来源：https://stackoverflow.com/questions/5309085/how-to-specify-the-x-y-rotation-point-when-using-animatetransform

标签

animation

svg

rotation

transform