如何在使用animateTransform時指定x-y旋轉點？

我想使用animateTransform連續旋轉SVG圖像。所以我們走：如何在使用animateTransform時指定x-y旋轉點？

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

我的問題是 - 我怎麼管理各地塊的中心連續的動畫旋轉？我已經看過spec和other related questions這兩個，但是我在執行提供的解釋時遇到了問題。

在此先感謝。

來源

2011-03-15 cfouche

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

在「從」，「由」和「到」屬性採取使用相同的語法，可用於給定的變換類型的值來表示：
（...）
對於類型=「旋轉」，每個單獨的值被表達爲<旋轉角> [< CX> < CY>]

可以指定爲旋轉中心，如果你親提供2個附加值，cx和cy。

因此，對於您的代碼，我在「從」添加「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和蠟染。

來源

2011-03-15 09:11:21 Planplan

要清楚：我們試圖實現的是圍繞一個本身正在翻譯的中心旋轉。我發現如果我有一個< animateTransform類型=旋轉>，我不能使用<animateMotion>或< animateTransform類型=翻譯>執行同時翻譯。它（最新的Chrome或Firefox）不會根據需要插入旋轉中心，而是產生「循環取消循環」。然而，對於x，y座標中的每一個，使用簡單的<動畫效果>確實按照期望工作;在這種情況下，只要您將from =參數設置爲起始角度，start x和start y位置，並將to =參數設置爲結尾，則沿着x，y路徑內插中心，animateTransform type = rotate 值。

來源

2014-03-20 16:42:58

如何在使用animateTransform時指定x-y旋轉點？

回答

相關問題