animation - 使用animateTransform时如何指定x-y旋转点？

Question

我想使用animateTransform连续旋转SVG图像。所以我们开始:

<?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>

这行得通。

现在:我想更改以上内容，以便块围绕其中心而不是其左上角旋转。我知道，如果要围绕块的中心静态旋转块，可以执行以下操作:

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

我的问题是-如何管理围绕方块中心的连续动画旋转？我已经在SO上查看了 spec和几个 other related questions，但是在执行提供的说明时遇到了麻烦。

提前致谢。

Answer 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>]

如果提供两个附加值cx和cy，则可以指定旋转的中心。

因此，对于您的代码，我在“from”和“to”属性中添加“50 50”:

<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>

它可以与Opera，Safari和Chrome浏览器的最新版本一起使用，还可以与Firefrox 4 Beta和Batik一起使用。