Question

我正在使用动画svg's。问题是我在Chrome和Firefox上有两种不同的行为。

这里是fiddle。而css：

@-webkit-keyframes breeze{
    0% {-webkit-transform: rotate(0deg);}
    50% {-webkit-transform: rotate(3deg);}
    100% {-webkit-transform: rotate(0deg);}
}
@keyframes breeze{
    0% {transform: rotate(0deg);}
    50% {transform: rotate(3deg);}
    100% {transform: rotate(0deg);}
}
#pine{
    -webkit-transform-origin: 50% 100%;
    -webkit-animation: breeze 5s ease-out infinite;
    transform-origin: 50% 100%;
    animation: breeze 5s ease-out infinite;     
    }

在Chrome中以我想要的方式设置动画，但在Firefox中，旋转点位于顶部而不是底部。

关于如何使其发挥作用的任何想法？

Answer 1

我建议仅将svg用于松树，并使用背景颜色的div作为背景。这应该在FF和Chrome中有相同的结果。

＆＃13;

.bg {
  background: #ADDDD9;
  width: 559px;
  height: 346px;
}

svg {
  -webkit-transform-origin: 50% 100%;
  -webkit-animation: breeze 5s ease-out infinite;
  transform-origin: 50% 100%;
  animation: breeze 5s ease-out infinite;
}

＆＃13;

<div class="bg">
  <!-- svg -->
</div>

＆＃13;

我更新了小提琴，看一看。 https://jsfiddle.net/k4wz32e6/

您可能希望重新保存SVG，因为现在视图框数太大了。

Answer 2

我不知道为什么transform-offset在Firefox中不起作用，但是你可以通过让想要旋转的对象的原点坐标位于你想要的位置来让事情变得更容易旋转。

这样做的另一个好处是，您可以对SVG中任何其他位置的树使用完全相同的CSS规则;只需更改父translate()元素的<g>属性。

@-webkit-keyframes breeze {
  0% { -webkit-transform: rotate(0deg); }
  50% { -webkit-transform: rotate(3deg); }
  100% { -webkit-transform: rotate(0deg); }
}
@keyframes breeze {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}
#pine {
  -webkit-animation: breeze 5s ease-out infinite;
  animation: breeze 5s ease-out infinite;
}

<svg xmlns="http://www.w3.org/2000/svg" width="559" height="509"
     viewBox="0 0 559 509">
  <rect fill="#ADDDD9" width="559" height="346.7" />
  <g transform="translate(225.5,334.9)">
    <g id="pine">
      <path fill="#B8B6DA" d="M-57.6-86.3 0-320.1 57.5-86.3Z" />
      <path fill="none" stroke="#8D6EA9" stroke-width="3.6"
            stroke-linecap="round" d="M0 0 0-255.7M-20-183.5 0
            -165.6M-27-130.6 0-96.2 23.4-123.8M-13.9-232-.2-211.2
            13.9-218.3M22.2-195.6 1.9-173.1" />
    </g>
  </g>
</svg>

css动画在浏览器中的变化

2 个答案: