Question

我有一个包含一个路径和一个多边形的svg。每个都有一个类，我使用CSS3过渡来动画它们。

这在Chrome和Safari中完美运行。在IE和Opera中，转换根本不会发生，它只是改变颜色，这很好 - 它不是理想的，但至少看起来不是坏。

然而，在Firefox上，形状从左上角开始动画，并被SVG的边缘裁剪。如果您不包含-webkit-transform-origin，这与您在Chrome上获得的行为相同，但在添加-moz-transform-origin后问题仍然存在。

我的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（无转换）。我希望它有所帮助！

-moz-transform-origin对SVG转换没有影响

1 个答案: