SVG 하위 요소의 크기를 조정하면 \"왼쪽 상단에서 날아가\"는 이유는 무엇이며 어떻게 해결합니까?

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

문제:

시도할 때 SVG 내의 하위 요소 크기를 조정하기 위해 변환 원점은 전체 SVG의 (0,0) 지점으로 설정되어 애니메이션 시 하위 요소가 "왼쪽 상단에서 날아오는" 것처럼 보입니다.

해결책:

애니메이션이 적용되는 특정 하위 요소를 기준으로 변형 원본을 설정하려면 다음 CSS 규칙을 추가하세요.

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

이것은 변형이 하위 요소의 경계 상자를 기준으로 하여 중심에서 크기가 조정되도록 합니다.

업데이트된 예:

<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 id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="
        width: 195px;
    ">
    <defs>
    <style>.cls-1{fill:#7f7777;}.cls-2{fill:#fff;}
</style>
    </defs>
    <rect class="cls-1" x="0.5" y="0.5" width="99" height="99"></rect>
    <path d="M99,1V99H1V1H99m1-1H0V100H100V0Z"></path>
    <rect id="animated-box" class="cls-2" x="10.5" y="8.5" width="22" height="6"></rect>
</svg></code>

설명:

변환 상자 속성은 변환 원점을 계산하는 데 사용되는 요소의 부분을 결정합니다. 채우기 상자로 설정하면 상위 SVG의 좌표 공간 대신 ​​하위 요소의 경계 상자를 사용하여 원점이 계산됩니다.

위 내용은 SVG 하위 요소의 크기를 조정하면 \"왼쪽 상단에서 날아가\"는 이유는 무엇이며 어떻게 해결합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!