내 SVG 하위 요소가 중앙이 아닌 왼쪽 상단에서 확장되는 이유는 무엇입니까?

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

SVG 내의 하위 요소 크기를 조정하려고 할 때 사용자는 변환 원점. 구체적으로 원점은 하위 요소의 중심이 아닌 전체 SVG를 기준으로 (0,0)으로 설정됩니다. 이 동작으로 인해 애니메이션이 원하는 요소의 중앙에서 크기가 조정되는 대신 왼쪽 상단에서 "날아다니는" 것처럼 보입니다.

이 문제를 해결하고 애니메이션이 적용되는 특정 요소를 기준으로 변환 원점을 설정하려면 변환- box 속성을 포함해야 합니다. "fill-box"로 설정하면 변환 원본이 하위 요소의 크기에 바인딩됩니다.

<code class="css">#animated-box {
  transform-box: fill-box;
  animation: scaleBox 2s infinite;
}</code>

이 수정을 통해 하위 요소(이 경우 애니메이션 상자)의 크기가 조정됩니다. 전체 SVG의 근원이 아닌 자체 중심에서.

위 내용은 내 SVG 하위 요소가 중앙이 아닌 왼쪽 상단에서 확장되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!