-moz-transform-origin은 SVG 트랜지션에 아무런 영향을주지 않습니다.

Question

하나의 경로와 하나의 다각형을 포함하는 svg가 있습니다. 각 클래스에는 클래스가 있으며 CSS3 전환을 사용하여 애니메이션을 만듭니다.

이것은 Chrome과 Safari에서 완벽하게 작동합니다. IE와 Opera에서 화면 전환이 전혀 발생하지 않습니다. 색상이 바뀌 었습니다. 이상적이지는 않지만 적어도 보지 못합니다. 불량.

그러나 Firefox에서는 모양이 왼쪽 상단 구석에서 움직이며 SVG 가장자리로 잘립니다. -webkit-transform-origin을 포함시키지 않은 경우 Chrome에서와 동일한 동작이지만 -moz-transform-origin을 추가 한 후에도 문제가 남아 있습니다.

예 : Copepen, JSFiddle

내 HTML :

<div class="overlay"> 
    <svg version="1.0" width="62" height="62" viewBox="0 0 62 62" xml:space="preserve" class="svg"> 
    <defs id="defs3003"></defs> 
    <path d="M 31,6 C 17.192,6 6,17.192 6,31 6,44.808 17.192,56 31,56 44.808,56 56,44.808 56,31 56,17.192 44.808,6 31,6 m 0,45.313 C 19.781,51.313 10.687,42.219 10.687,31 10.687,19.781 19.781,10.688 31,10.688 c 11.219,0 20.313,9.093 20.313,20.312 0,11.219 -9.094,20.313 -20.313,20.313" id="path2997" style="fill:#ffffff" class="ring"></path> 
    <polygon points="22.75,41.938 22.75,20.063 41.5,31 " transform="translate(0.86055955,-5e-4)" id="polygon2999" style="fill:#ffffff" class="inner"></polygon> 
    </svg> 
</div> 

내 CSS :

.overlay { 
    position: relative; 
    background: #333; 
    top: 0; 
    left: 0; 
    width: 200px; 
    height: 200px; 
    transition: all linear 0.3s; 
    -webkit-transform: translateZ(0); 
    -webkit-backface-visibility: hidden; 
    -webkit-perspective: 1000; 
} 
.overlay .svg { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -32px; 
    margin-top: -32px; 
} 
.overlay .svg .inner { 
    -webkit-transform-origin: 50% 50%; 
    -moz-transform-origin: 50% 50%; 
      transform-origin: 50% 50%; 
    -webkit-transform: scale(0); 
    -moz-transform: scale(0); 
     -ms-transform: scale(0); 
     -o-transform: scale(0); 
      transform: scale(0); 
    -webkit-transition: all linear 0.2s; 
    -moz-transition: all linear 0.2s; 
     -ms-transition: all linear 0.2s; 
     -o-transition: all linear 0.2s; 
      transition: all linear 0.2s; 
    -webkit-backface-visibility: hidden; 
    fill: #fff !important; 
} 
.overlay:hover .svg .inner { 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
     -ms-transform: scale(1); 
     -o-transform: scale(1); 
      transform: scale(1); 
    -webkit-transition: all linear 0.1s; 
    -moz-transition: all linear 0.1s; 
     -ms-transition: all linear 0.1s; 
     -o-transition: all linear 0.1s; 
      transition: all linear 0.1s; 
    left: 50%; 
    top: 50%; 
    margin-left: -32px; 
    margin-top: -32px; 
    fill: #FA0 !important; 
} 

.overlay .svg .ring { 
    -webkit-transform-origin: 50% 50%; 
    -moz-transform-origin: 50% 50%; 
      transform-origin: 50% 50%; 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
     -ms-transform: scale(1); 
     -o-transform: scale(1); 
      transform: scale(1); 
    -webkit-transition: all linear 0.25s; 
    -moz-transition: all linear 0.25s; 
     -ms-transition: all linear 0.25s; 
     -o-transition: all linear 0.25s; 
      transition: all linear 0.25s; 
    fill: #fff !important; 
} 

.overlay:hover .svg .ring { 
    -webkit-transform: scale(1.2); 
    -moz-transform: scale(1.2); 
     -ms-transform: scale(1.2); 
     -o-transform: scale(1.2); 
      transform: scale(1.2); 
    -webkit-transition: all linear 0.15s; 
    -moz-transition: all linear 0.15s; 
     -ms-transition: all linear 0.15s; 
     -o-transition: all linear 0.15s; 
      transition: all linear 0.15s; 
    fill: #FA0 !important; 
} 

Answer 1

나는 SVG를 사용하여 전환 몇 가지 문제가 있었다. HTML 만 사용해 보셨습니까?

HTML 만 사용하도록 코드를 변경했습니다. http://jsfiddle.net/labmorales/kkVnY/1/

는 Windows7에 HTML

<div class="overlay"> 
    <div class="svg"> 
     <div class="ring"> 
      <div class="inner"></div>  
     </div> 
    </div> 
</div> 

CSS (전환없이) 파이어 폭스, 크롬, IE9 여기에 근무

.overlay { 
    position: relative; 
    background: #333; 
    top: 0; 
    left: 0; 
    width: 200px; 
    height: 200px; 
    transition: all linear 0.3s; 
    -webkit-transform: translateZ(0); 
    -webkit-backface-visibility: hidden; 
    -webkit-perspective: 1000; 
} 
.overlay .svg { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -32px; 
    margin-top: -32px; 
    width: 62px; 
    height: 62px; 
} 
.overlay .svg .inner { 
    -webkit-transform-origin: 50% 50%; 
    -moz-transform-origin: 32px 32px; 
      transform-origin: 50% 50%; 
    -webkit-transform: scale(0); 
    -moz-transform: scale(0); 
     -ms-transform: scale(0); 
     -o-transform: scale(0); 
      transform: scale(0); 
    -webkit-transition: all linear 0.2s; 
    -moz-transition: all linear 0.2s; 
     -ms-transition: all linear 0.2s; 
     -o-transition: all linear 0.2s; 
      transition: all linear 0.2s; 
    -webkit-backface-visibility: hidden; 

    width: 0; 
    height: 0; 
    border-top: 12px solid transparent; 
    border-bottom: 12px solid transparent; 
    border-left: 15px solid #fff; 
    margin: 13px 24px; 
    /*background: #fff !important;*/ 
} 
.overlay:hover .svg .inner { 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
     -ms-transform: scale(1); 
     -o-transform: scale(1); 
      transform: scale(1); 
    -webkit-transition: all linear 0.1s; 
    -moz-transition: all linear 0.1s; 
     -ms-transition: all linear 0.1s; 
     -o-transition: all linear 0.1s; 
      transition: all linear 0.1s; 
    left: 50%; 
    top: 50%; 

    border-left: 15px solid #FA0; 
    /*background: #FA0 !important;*/ 
} 

.overlay .svg .ring { 
    border-radius: 50%; 
    border: 3px solid #fff; 
    height: 50px; 
    -webkit-transform-origin: 50% 50%; 
    -moz-transform-origin: 32px 32px; 
      transform-origin: 50% 50%; 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
     -ms-transform: scale(1); 
     -o-transform: scale(1); 
      transform: scale(1); 
    -webkit-transition: all linear 0.25s; 
    -moz-transition: all linear 0.25s; 
     -ms-transition: all linear 0.25s; 
     -o-transition: all linear 0.25s; 
      transition: all linear 0.25s; 
    /*fill: #fff !important;*/ 
} 

.overlay:hover .svg .ring { 
    -webkit-transform: scale(1.2); 
    -moz-transform: scale(1.2); 
     -ms-transform: scale(1.2); 
     -o-transform: scale(1.2); 
      transform: scale(1.2); 
    -webkit-transition: all linear 0.15s; 
    -moz-transition: all linear 0.15s; 
     -ms-transition: all linear 0.15s; 
     -o-transition: all linear 0.15s; 
      transition: all linear 0.15s; 
    /*fill: #FA0 !important;*/ 
    border-color: #FA0 !important; 
} 

. 도움이되기를 바랍니다!