SVG 회전 앵커 포인트

Question

저는이 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"/> 

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

당신이 도와 수 있기를 바랍니다.

Answer 1

from 및 to 속성을 사용하십시오.

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

첫 번째 열은 주위의 회전 요동 또는 회전이다 anchorpoint 번째 세 번째 열의도이다. 따라서 60 및 70 값 모두를 피벗 점으로 수정할 수 있습니다. X Y 값은 왼쪽 상단 구석에서 시작합니다.

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"/>