SVG動畫正在翻譯爲0,0在旋轉

我想獲得一個SVG動畫旋轉工作，理想的是圍繞其中心（我一直在嘗試它與旋轉作爲翻譯點+ 1/2寬度&高度得到它工作，但我猜我缺少一些矩陣和翻譯？）。SVG動畫正在翻譯爲0,0在旋轉

當我嘗試時，它會在執行旋轉之前將對象轉換爲位置0,0，而不是圍繞其中心（或靠近），這是我試圖避免的。

<svg xmlns="http://www.w3.org/2000/svg" height="800" width="800" version="1.1"> 
    <g id="1003_moveable" transform="translate(292 124)"> 
    <g fill="yellow" desc="A shape" id="1002_moveable"> 
     <rect width="200" height="100" x="10" y="50"></rect> 
     <circle cy="20" cx="20" r="90" stroke="#777" fill=""></circle> 
    </g> 

    <animate id="animid_1004" begin="indefinite"></animate> 
    <animateTransform fill="none" type="rotate" attributeType="XML" attributeName="transform" from="0,432,234" to="360,432,234" dur="3s" id="animid_1005" begin="animid_1004.begin"> 

    </animateTransform> 
    </g> 
</svg> 

document.getElementById("animid_1004").beginElement();

來源

2013-10-17 Ian

你<animateTransform>被覆蓋transform上已存在該<g>。如果您將translate()移至內部組，您應該會發現效果更好。

來源

2013-10-17 20:29:58

謝謝，我想知道這是一個問題，它從一些動態定位的掛鉤，我會嘗試，看看是否也適用。 – Ian

只是爲了證實這一點，如果有幫助的話，也可以在http://jsfiddle.net/keHrm/4/上更新小提琴。謝謝。編輯：雖然我注意到他們對中心的旋轉方式不同，但我猜測是由於變換的不同位置。 – Ian

另外我懷疑我的初始計算中心實際上是關閉的。 – Ian

我找到了答案，我想。我沒有意識到有一個'加法'轉換的概念，或者看到'by'屬性，我認爲它總是需要從和到。我一直在尋找http://www.w3.org/TR/2001/REC-smil-animation-20010904/#FromToByAndAdditive

所以修改的部分是..

<animateTransform fill="none" type="rotate" attributeType="XML" attributeName="transform" by="360" dur="3s" id="animid_1005" begin="animid_1004.begin">

的jsfiddle在http://jsfiddle.net/keHrm/3/顯示它繞着中心。

來源

2013-10-17 20:34:10 Ian

SVG動畫正在翻譯爲0,0在旋轉

回答

相關問題