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

HTML

<div class="overlay">
    <div class="svg">
        <div class="ring">
            <div class="inner"></div>    
        </div>
    </div>
</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;
  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;   
}

在 Windows7 上的 Firefox、Chrome、IE9(无转换)上工作。希望对您有所帮助!