Firefox에서 SVG 그룹에 대한 변환 원점 설정이 작동하지 않는 이유는 무엇입니까?-CSS 튜토리얼-php.cn

Firefox에서 SVG 그룹에 대한 변환 원점 설정이 작동하지 않는 이유는 무엇입니까?

Susan Sarandon

풀어 주다： 2024-11-29 11:13:11

원래의

431명이 탐색했습니다.

Why Doesn't Setting the Transform Origin for an SVG Group Work in Firefox?

Firefox에서 SVG 그룹에 대한 변환 원점 설정이 작동하지 않습니다.

Firefox(버전 18, 기타 버전)에서 변환 원점을 사용하는 데 문제가 발생했습니다. 테스트되지 않았습니다). WebKit 브라우저는 예상대로 작동합니다. 원점을 그룹의 중심으로 설정하려고 시도했지만 지금까지 시도한 것은 아무것도 작동하지 않았습니다.

코드는 다음과 같습니다.

#test {
  -webkit-transform-origin: 50% 50%;
  transform-origin: center center;
  -webkit-animation: prop 2s infinite;
  animation: prop 2s infinite;
}

@-webkit-keyframes prop {
  0% {
    -webkit-transform: scale(1, 1);
  }
  20% {
    -webkit-transform: scale(1, .8);
  }
  40% {
    -webkit-transform: scale(1, .6);
  }
  50% {
    -webkit-transform: scale(1, .4);
  }
  60% {
    -webkit-transform: scale(1, .2);
  }
  70% {
    -webkit-transform: scale(1, .4);
  }
  80% {
    -webkit-transform: scale(1, .6);
  }
  90% {
    -webkit-transform: scale(1, .8);
  }
  100% {
    -webkit-transform: scale(1, 1);
  }
}

@keyframes prop {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  20% {
    transform: matrix(1, 0, 0, .8, 0, 0);
  }
  40% {
    transform: matrix(1, 0, 0, .6, 0, 0);
  }
  50% {
    transform: matrix(1, 0, 0, .4, 0, 0);
  }
  60% {
    transform: matrix(1, 0, 0, .2, 0, 0);
  }
  70% {
    transform: matrix(1, 0, 0, .4, 0, 0);
  }
  80% {
    transform: matrix(1, 0, 0, .6, 0, 0);
  }
  90% {
    transform: matrix(1, 0, 0, .8, 0, 0);
  }
  100% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}

로그인 후 복사

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="128px" viewBox="0 0 16 16">
    <g>

로그인 후 복사

해결책

CSS를 사용하여 중심점을 중심으로 간단한 기어를 회전하려고 합니다. svg 그래픽을 변환합니다. 나는 Firefox에서 당신과 같은 문제를 겪고 있습니다. 변환 원본은 아무런 효과가 없는 것 같습니다.

해결책은 중심이 좌표 0에 오도록 원본 SVG 모양을 그리는 것입니다. 0:

<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>

로그인 후 복사

이제 Firefox Works에서 작동하는 CSS 변환을 적용할 수 있습니다(저는 JavaScript를 사용합니다) 사용자 작업을 기반으로 HTML 태그를 추가하려면 클래스(js-rotateObject)를 추가하고 Minimizr을 사용하여 브라우저가 변환 및 변환(.csstransforms.csstransitions)을 처리할 수 있는지 확인하는 것을 잊지 마세요.

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

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

로그인 후 복사

도움이 되기를 바랍니다.

위 내용은 Firefox에서 SVG 그룹에 대한 변환 원점 설정이 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!