如何在使用animateTransform时指定x-y旋转点?

时间:2011-03-15 08:21:18

标签: animation svg rotation transform

我想使用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,但是我无法实现所提供的解释。

提前致谢。

2 个答案:

答案 0 :(得分:9)

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

  

'from','by'和'to'属性采用与给定转换类型相同的语法表示的值:
  (...)
  对于type =“rotate”,每个单独的值表示为&lt; rotate-angle&gt;并[d CX&GT; &LT; CY和GT;]

如果您提供2个附加值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。

答案 1 :(得分:0)

要明确:我们要努力实现的是围绕一个本身正在翻译的中心的旋转。我发现如果我有&lt; animateTransform type = rotate&gt;,我就不能使用&lt; animateMotion&gt;,也不能使用&lt; animateTransform type = translate&gt;进行同声翻译。它(最新的Chrome或Firefox)不会根据需要插入旋转中心,从而导致“循环de循环”。但是,使用简单的&lt; animate&gt;对于每个x,y坐标确实按照需要工作;在这种情况下,&lt; animateTransform type = rotate&gt;只要将from =参数设置为起始角度,开始x并开始y位置,并将to =参数设置为结束值,就可以沿x,y路径插入中心。