`transform-box: fill-box;`를 사용하여 SVG 하위 요소에서 예기치 않은 애니메이션 동작을 수정하는 방법은 무엇입니까?

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

SVG 내의 하위 요소에 애니메이션을 적용하려고 하면 요소의 변환 원본이 애니메이션되는 특정 하위 요소가 아닌 전체 SVG를 기준으로 설정되는 경우가 많습니다. 이로 인해 요소가 자체 중심이 아닌 SVG의 왼쪽 상단에서 크기가 조정되는 것처럼 나타나는 등 예상치 못한 애니메이션 동작이 발생할 수 있습니다.

이 문제를 해결하기 위해 CSS는 다음과 같은 변형 상자 속성을 제공합니다. 변환의 영향을 받는 상자를 정의하는 데 사용됩니다. 변환 상자를 채우기 상자로 설정하면 요소의 콘텐츠 상자(즉, 요소의 표시되는 콘텐츠가 차지하는 영역)에만 변형이 적용됩니다.

아래 예를 고려하세요. SVG 내의 (id="animated-box")는 CSS 애니메이션을 사용하여 크기가 조정됩니다.

@keyframes scaleBox {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

#animated-box {
  animation: scaleBox 2s infinite;
}

변형 상자 속성을 설정하지 않으면 다음과 같이 직사각형이 SVG의 왼쪽 상단에서 크기가 조정됩니다. 변환 원점은 전체 SVG를 기준으로 (0,0)으로 설정됩니다.

이 동작을 수정하고 자체 중심에서 직사각형 크기를 조정하려면 변환 상자: 채우기 상자; #animated-box 선택기:

@keyframes scaleBox {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

#animated-box {
  transform-box: fill-box;
  animation: scaleBox 2s infinite;
}

Transform-box 속성을 사용하면 요소의 콘텐츠 상자에만 변형이 적용되므로 직사각형이 자체 중심에서 크기가 조정됩니다. 이를 통해 애니메이션을 더욱 효과적으로 제어할 수 있으며 더욱 정확하고 시각적으로 매력적인 결과를 얻을 수 있습니다.

위 내용은 `transform-box: fill-box;`를 사용하여 SVG 하위 요소에서 예기치 않은 애니메이션 동작을 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!