거기에 SVG 요소에 대한 크기 조정 애니메이션이 있습니다

Question

내가 가지고있는 라인과 원과 같은 플라이에서 JS 코드로 생성 된 일부 svg 요소는 일부 형상으로 구성되며 원하는 것은 연속적으로 수치를 재조정하려고하는 것입니다. svg 애니메이션 기능을 사용합니다. 물론 원의 선과 중심점의 각 점의 좌표를 다시 계산하여 거기에서 시작할 수는 있지만 너무 지루한 해결책이 될 수 있습니다. 어떻게하면 더 잘할 수 있습니까?

고맙습니다.

Answer 1

요소를 <g> 요소에 넣은 다음 <g>에 transform = "scale (1)"과 같은 변형 특성을 지정하고 자식 <animateTransform> 요소를 사용하여 애니메이션을 적용합니다. 아마도 이것과 비슷한 것일 겁니다 ...

<animateTransform attributeName="transform" 
attributeType="XML" type="scale" from="1" to="3" 
additive="sum" begin="1s" dur="5s" fill="freeze"/>