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/

1 ответ

Решение

Я собираюсь сделать обоснованное предположение и сказать, что это потому, что вы использовали центр формы, а не центр круглой части формы. Если это так, то стрелка будет приводить к смещенному центру.

По моим расчетам, центр находится примерно на (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">
   .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.4 9.5" to="0 8.4 9.5" dur="0.5s" additive="sum" repeatCount="indefinite" />
  </path>
</svg>

Другие вопросы по тегам