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

【问题标题】：How to specify the x-y rotation point when using animateTransform?使用 animateTransform 时如何指定 x-y 旋转点？
【发布时间】：2011-07-15 14:39:01
【问题描述】：

我想使用 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，但我在执行所提供的解释时遇到了麻烦。

提前致谢。

【问题讨论】：

标签： animation svg rotation transform

【解决方案1】：

明确一点：我们试图实现的是围绕一个本身正在平移的中心旋转。我发现如果我有一个，我不能使用，也不能使用来执行同声传译。它（最新的 Chrome 或 Firefox）不会根据需要插入旋转中心，而是导致“循环循环”。但是，对每个 x,y 坐标使用简单的确实可以按需要工作；在这种情况下，沿 x,y 路径插入中心，只要将 from= 参数设置为起始角度，开始 x 和开始 y 位置，并将 to= 参数设置为结束价值观。

【讨论】：

【解决方案2】：

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

“from”、“by”和“to”属性采用与给定转换类型相同的语法表示的值：
(...)
对于 type="rotate"，每个单独的值都表示为 []

如果您提供 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。

【讨论】：