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

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></g></svg>

해결책

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

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

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

그런 다음 주변에 그룹을 추가하고 원하는 위치로 이동합니다.

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

이제 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!