Firefox에서 SVG 그룹 `transform-origin`이 예상대로 작동하지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?-CSS 튜토리얼-php.cn

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

Linda Hamilton

풀어 주다： 2024-11-19 14:41:02

원래의

333명이 탐색했습니다.

Why Doesn't SVG Group `transform-origin` Work as Expected in Firefox, and How Can I Fix It?

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

Firefox 사용자는 SVG 그룹에서 변환 원본을 사용하는 데 어려움을 겪을 수 있습니다. 원점을 중심으로 하려는 시도에도 불구하고 원하는 변환은 여전히 어렵습니다. 이 문제는 Firefox의 고유한 SVG 그리기 스타일에서 발생합니다.

이 문제를 해결하려면 중심이 원점(0, 0)에 있는 SVG 모양을 그립니다.

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
    <rect>

로그인 후 복사

다음으로, 그룹 내에 도형을 포함하고 원하는 위치로 변환합니다.

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

로그인 후 복사

이제 다음을 포함하여 이 그룹에 CSS 전환을 적용할 수 있습니다. 변환 원본이며 Firefox에서 올바르게 작동해야 합니다:

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

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

로그인 후 복사

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