SVG動畫圍繞中心點旋轉路徑。

我目前無法讓SVG在其軸上完美旋轉..作爲其路徑。我試着計算出我認爲應該成爲中心的地方。任何人都可以指出我正確的方向，爲什麼這不是完全圍繞質心旋轉的？或者將來如何最好地計算它？SVG動畫圍繞中心點旋轉路徑。

<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" viewBox="0 0 17 17" > 
<style type="text/css"> 
    .st0{fill:#000000;} 
</style> 
    <path id="arrow" class="st0" d="M9.3,16.4c3.2-0.4,5.8-2.9,6.2-6.1c0.5-4.2-2.8-7.7-6.9-7.8V0.6c0-0.1-0.1-0.2-0.2-0.1l-4,2.9 
    c-0.1,0-0.1,0.1,0,0.2l3.9,2.8c0.1,0.1,0.2,0,0.2-0.1V4.5c2.9,0,5.2,2.5,5,5.4c-0.2,2.5-2.2,4.5-4.8,4.7c-2.7,0.2-5-1.7-5.4-4.2 
    c-0.1-0.5-0.5-0.8-1-0.8c-0.6,0-1,0.5-1,1.1C2.1,14.2,5.4,16.9,9.3,16.4L9.3,16.4z"/> 

    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 8.425116062164307 8.459185183048248" to="0 8.425116062164307 8.459185183048248" dur="0.5s" additive="sum" repeatCount="indefinite" /> 
</svg>

https://jsfiddle.net/vfz5t0vw/

來源

2017-08-09 Paul

我要做出一個受過教育的猜測，說這是因爲你使用的形狀的中心，而不是形狀的圓形部分的中心。如果是這種情況，那麼箭頭將導致偏移中心。根據我的估算，中心大約在（8.4,9.5）。

如果您僅旋轉路徑而不是整個SVG，那麼您現在可以獲得更好的結果。

任何剩餘擺動都是由於箭頭路徑看起來不是完美的圓形。

<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" viewBox="0 0 17 17" > 
 
    <style type="text/css"> 
 
    \t .st0{fill:#000000;} 
 
    </style> 
 
    \t <path id="arrow" class="st0" d="M9.3,16.4c3.2-0.4,5.8-2.9,6.2-6.1c0.5-4.2-2.8-7.7-6.9-7.8V0.6c0-0.1-0.1-0.2-0.2-0.1l-4,2.9 
 
    \t c-0.1,0-0.1,0.1,0,0.2l3.9,2.8c0.1,0.1,0.2,0,0.2-0.1V4.5c2.9,0,5.2,2.5,5,5.4c-0.2,2.5-2.2,4.5-4.8,4.7c-2.7,0.2-5-1.7-5.4-4.2 
 
    \t c-0.1-0.5-0.5-0.8-1-0.8c-0.6,0-1,0.5-1,1.1C2.1,14.2,5.4,16.9,9.3,16.4L9.3,16.4z"> 
 
    \t 
 
    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 8.4 9.5" to="0 8.4 9.5" dur="0.5s" additive="sum" repeatCount="indefinite" /> 
 
    </path> 
 
</svg>

來源

2017-08-09 12:40:23

你是怎麼計算出8.4/9.5的值？ – Paul

試錯。我在SVG中添加了一個圓圈，並將其移至中間位置。 https://jsfiddle.net/vfz5t0vw/1/ –

SVG動畫圍繞中心點旋轉路徑。

回答

相關問題