Firefox의 SVG 그룹에서 `transform-origin`이 올바르게 작동하지 않는 이유는 무엇입니까?

Firefox용 SVG 그룹의 변환 원본 문제 해결

문제 설명

SVG 그룹에서 변환 원본 설정 Firefox에서는 아무런 효과가 없는 것 같습니다. 이는 Webkit 브라우저에서는 의도한 대로 작동하지만 Firefox에서 사용할 경우 변환 원본이 제대로 정렬되지 않습니다.

코드 예

#test {
  -webkit-transform-origin: 50% 50%;
  transform-origin: center center;
 ...
}

해결책

이 문제를 해결하려면 중심이 좌표에 있는 원본 SVG 모양을 그리는 것이 좋습니다. (0, 0). 여기에는 예상되는 변환 원점과 올바르게 정렬되도록 모양의 원점을 이동하는 작업이 포함됩니다.

수정된 SVG

<svg x="0px" y="0px" width="400px" height="400px" viewbox="0 0 400 400">
    <g transform="translate(150, 100)">
        <rect></rect></g></svg>

모양의 중심을 ( 0, 0), 이제 변환 원본이 올바르게 적용되어 Firefox 내에서 원하는 변환 동작을 얻을 수 있습니다.

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