내 SVG 하위 요소 애니메이션이 잘못된 출처에서 시작되는 이유는 무엇입니까?

SVG 하위 요소의 CSS 변환 원본 문제

SVG로 작업할 때 하위 요소의 변환 원본을 제어하는 ​​것이 어려울 수 있습니다. 강요. 기본적으로 CSS 애니메이션 및 변환은 애니메이션이 적용되는 특정 요소의 중심이 아닌 전체 SVG의 (0,0) 원점을 사용합니다.

문제 이해

제공된 예에서는 하위 요소 "애니메이션 상자"를 중심에서 크기를 조정하려는 의도입니다. 그러나 애니메이션은 SVG의 (0,0) 원점에서 시작하여 상자가 "왼쪽 상단에서 날아오는" 듯한 착각을 불러일으킵니다.

해결책: 상자 변환

애니메이션 요소를 기준으로 변환 원점을 설정하려면 "transform-box" 속성을 사용할 수 있습니다.

<code class="css">transform-box: fill-box;</code>

"fill-box" 값은 브라우저에 하위 요소의 경계 상자(채워지는 영역)를 변환 원점으로 사용합니다. 이렇게 하면 애니메이션이 의도한 대로 "애니메이션 상자" 중심에서 크기가 조정됩니다.

업데이트된 예

변환 상자 속성을 예에 적용:

<code class="css">@keyframes scaleBox {
  from {transform: scale(0);}
  to {transform: scale(1);}
}
#animated-box {
  transform-box: fill-box;
  animation: scaleBox 2s infinite;
}</code>

<code class="html"><svg ...>
  ...
  <rect id="animated-box" ...>
  ...
</svg></code>

이제 "애니메이션 상자"가 중앙에서 크기가 조정되어 더욱 부드럽고 정확한 애니메이션이 만들어집니다.

위 내용은 내 SVG 하위 요소 애니메이션이 잘못된 출처에서 시작되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!