SVG 旋转锚点 [英] SVG rotation anchorpoint

问题描述

我是这个 SVG 主题的新手，但需要一些帮助.我需要为一个气球制作动画，该气球通过一些旋转从一侧到另一侧摆动 - 就像一个带有尾巴的气球漂浮起来.我从气球部分开始，但在旋转时它似乎锚定在左上角！无论如何 - 到处搜索..

I'm new to this SVG subject but wanted some help. I need to animate a balloon that wobbles from side to side with some rotation - like a balloon floating up with a tail. I have started with the balloon part but on the rotation its seems to be anchored to the top left! any way around this - search everywhere..

<svg class="balloon"
viewBox="0 0 500 500"
xmlns="http://www.w3.org/2000/svg">

<path fill="#1D1D1B" d="M95.8,52.2c0-26.5-21.5-47.9-47.9-47.9S0,25.8,0,52.2c0,25.3,19.6,51,44.5,52.8c-0.9,1.6-2,3.3-3.1,4.6
c2.3,0.7,3.7-1,5.3,0c1.7,1,0.9-2,5.4,0.3c1.7,0.9,0.1-1.9-1.4-4.9C75.9,103.6,95.8,77.8,95.8,52.2z M16.3,31.4
c-1.6-1.6-0.5-5.1,2.3-8s6.4-3.9,8-2.3c1.6,1.6,0.5,5.1-2.3,8S17.8,33,16.3,31.4z M34.9,65.1c-7.2,0-13-5.1-13-12.9
c0-7.8,5.8-12.8,13-12.8c4.8,0,8,2.3,10,5.2l-3.6,2c-1.3-1.9-3.6-3.3-6.4-3.3c-4.9,0-8.6,3.8-8.6,9s3.6,9,8.6,9
c2.5,0,4.8-1.2,5.9-2.2v-3.9h-7.4v-3.8h11.8v9.3C42.7,63.3,39.2,65.1,34.9,65.1z M61.3,65.1c-7.4,0-12.7-5.4-12.7-12.8
c0-7.4,5.3-12.8,12.7-12.8c7.4,0,12.7,5.4,12.7,12.8C74,59.6,68.7,65.1,61.3,65.1z"/>

 <animateTransform 

                attributeType="xml"
                attributeName="transform"
                type="rotate"
                values="0;20;0" dur="3s"
                dur="4s"
                repeatCount="indefinite"/>

希望能帮到你.

推荐答案

使用 from 和 to 属性.

Use the from and to attributes.

from="0 60 70" 
to="360 60 70" 

第一列是旋转度数第二列第三列是要绕其旋转的枢轴或锚点.因此，您将把 60 和 70 值都修改为您的轴心点.X Y 值从左上角开始.

The first column is the degrees of rotation the second the third column are the pivot or anchorpoint to rotate around. so you will modify both of the 60 and 70 values to your pivot point. The X Y values start at the upper left hand corner.

0 1 2 3 4...
1
2
3
4
...

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateTransform

<animateTransform attributeName="transform" 
                      attributeType="XML"
                      type="rotate" 
                      from="0 60 70" 
                      to="360 60 70" 
                      dur="10s"
                      repeatCount="indefinite"/>

这篇关于SVG 旋转锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！