SVG animateTransform與變換衝突

我嘗試了SVG圖像中的一些動畫和轉換。SVG animateTransform與變換衝突

我想翻譯和調整大小和翻譯路徑以及動畫旋轉。

看來我只能翻譯和調整大小或一次旋轉。如果我一起嘗試它們，那麼翻譯和調整大小不會成立：如果我刪除動畫，那麼它們會移動並且尺寸合適。

此行爲在Linux和OSX以及FF和Safari中都是一致的。

例如

  <use id="tengear" fill="#ffffff" stroke="#E2E2E2" stroke-width="3" transform="scale(0.40)translate(62, 180)" style="filter:url(#distanceBlurFar)" xlink:href="#tengearuse"> 
      <animateTransform 
       attributeType="XML" 
       attributeName="transform" 
       type="rotate" 
       from="0,162,280" to="360,162,280" 
       begin="0s" dur="11" 
       repeatCount="indefinite"/> 
     </use>

這應該是小和移動以及旋轉。然而它很大，沒有移動，但正在旋轉。

  <use id="tengear" fill="#ffffff" stroke="#E2E2E2" stroke-width="3" transform="scale(0.40)translate(62, 180)" style="filter:url(#distanceBlurFar)" xlink:href="#tengearuse"> 
     </use>

這一個是移動和旋轉，但不旋轉。

有人可以幫我解決這個問題嗎？

*您將需要假設的使用和其他引用是有效的

Full source here

來源

2010-11-08 Hyposaurus

編輯是針對彼得的評論 – Hyposaurus 2010-11-08 08:08:34

事實證明，這是一個RTFM問題。

Go to the spec and讀關於添加劑=「太陽」和添加劑=「替換」

現在讀起來像是：

  <use id="tengear" fill="#ffffff" stroke="#E2E2E2" stroke-width="2.5" transform="scale(0.25) translate(390, 360)" style="filter:url(#distanceBlurClose)" xlink:href="#tengearuse"> 
      <animateTransform 
       attributeType="XML" 
       attributeName="transform" 
       type="rotate" 
       from="0,390,360" to="360,390,360" 
       begin="0s" dur="11" 
       repeatCount="indefinite" 
       additive="sum"/> 
     </use>

來源

2010-11-09 04:27:33 Hyposaurus

目前還不清楚是什麼你正在嘗試做的，如果你減少你的榜樣的大小，這將有助於在那裏你可以在這裏發佈。聽起來好像你應該使用animateTransform和animateMotion。我經常從找到一個已經有效的例子開始，然後逐漸修改它以包含我自己的要求。並始終只使用盡可能少的功能可能

見http://www.w3schools.com/svg/el_animatetransform.asp

來源

2010-11-08 07:48:51

SVG animateTransform與變換衝突

回答

相關問題