Firefox의 SVG 그룹에서 `transform-origin`이 작동하지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?

SVG 그룹의 변환 원본: Firefox 전용 솔루션

Firefox에서 SVG 그룹의 변환 원본 설정은 지속적이었습니다. 문제로 인해 개발자들은 겉보기에 작동하지 않는 이유에 대해 당황하게 되었습니다. 이 문제를 해결하기 위해 효과적인 것으로 입증된 솔루션을 살펴보겠습니다.

이 문제를 설명하려면 다음 SVG 코드를 고려하세요.

<svg>
  <g>

Firefox는 변환 원본 속성을 무시합니다. 즉, 의도한 중심을 중심으로 그룹의 변형이 발생하지 않습니다.

이 문제를 해결하는 열쇠는 SVG 디자인을 수정하는 데 있습니다. 그룹 내에서 도형을 그리는 것이 아니라 중심이 좌표 원점(0, 0)에 맞춰지도록 생성해야 합니다. 예:

<svg>
  <rect>

이 시나리오에서는 직사각형의 중심이 좌표 원점과 정렬됩니다. 그런 다음 CSS를 사용하여 Firefox가 그룹 중심을 중심으로 적절하게 실행할 전환 및 애니메이션을 만들 수 있습니다.

예를 들어 다음 CSS 스니펫은 Firefox의 중심을 중심으로 그룹(및 직사각형)을 회전합니다.

#myObject {
  transform: rotate(0deg);
  transition: all 1s linear;
}

.csstransforms.csstransitions.js-rotateObject #myObject {
  transform: rotate(360deg);
}

이 솔루션은 Firefox의 원본 변환 문제를 효과적으로 해결하여 SVG 그룹을 중심으로 원활한 변환을 가능하게 합니다.

위 내용은 Firefox의 SVG 그룹에서 `transform-origin`이 작동하지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!