logo标签列表

Safari浏览器中SVG线条动画反转？

cssanimationsvgsafari
4

我为一个网站制作了相当简单的旋转动画，在Chrome/Firefox中看起来很棒，但出现了一个问题，它们在Safari中以相反的方式进行动画。我尝试了更改偏移量的值，但似乎没有什么作用。是否有任何解决方法？

.sq {
  width: 50vw;
  height: auto;
  padding: 2.2vw;
}

.path {
  stroke-dasharray: 250;
  stroke-dashoffset: 250;
  animation: line 3s ease forwards;
}

@keyframes line {
  from {
    stroke-dashoffset: -250;
  }
  to {
    stroke-dashoffset: 0;
  }
}
<div class="sq">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.32 81.32">
  <defs>
    <style>
      .cls-1{fill:#202020;opacity:0.1;}
      .path{fill:none;stroke:#ef3f44;stroke-miterlimit:10;stroke-width:5px;}
    </style>
  </defs>
  <g id="94" data-name="94">
    <g id="Objects">
      <circle cx="40.66" cy="40.66" r="27.17" class="cls-1"/>
      <path d="M40.66 79.15a38.49 38.49 0 1 1 38.49-38.49 38.53 38.53 0 0 1-38.49 38.49zm0-76.07a37.58 37.58 0 1 0 37.58 37.58A37.63 37.63 0 0 0 40.66 3.08z" class="cls-1"/>
      <path d="M26.83 5.1a38.16 38.16 0 1 0 13.83-2.6" class="path"/>
    </g>
  </g>
</svg> 
</div>

同时，也可以在Codepen上查看：

https://codepen.io/noahbrennan/pen/RLNWXj

1
这是一个很酷的效果 - 好吧，不好笑 - 也许你使用了负虚线偏移量导致了问题。 - Mikkel
3个回答
3
为了避免使用负数值的 stroke-dashoffset，请使用双倍于stroke-dashoffset: 500的正值。
不要使用负数值。
@keyframes line {
  from {
    stroke-dashoffset: -250;
  }
  to {
    stroke-dashoffset: 0;
  }
}

使用双正值：

@keyframes line {
  from {
    stroke-dashoffset: 250;
  }
  to {
    stroke-dashoffset: 500;
  }
}


.sq {
  width: 50vw;
  height: auto;
  padding: 2.2vw;
}

.path {
  stroke-dasharray: 250;
  stroke-dashoffset: 250;
  animation: line 3s ease forwards;
}

@keyframes line {
  from {
    stroke-dashoffset: 250;
  }
  to {
    stroke-dashoffset: 500;
  }
}
<div class="sq">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.32 81.32">
  <defs>
    <style>
      .cls-1{fill:#202020;opacity:0.1;}
      .path{fill:none;stroke:#ef3f44;stroke-miterlimit:10;stroke-width:5px;}
    </style>
  </defs>
  <g id="94" data-name="94">
    <g id="Objects">
      <circle cx="40.66" cy="40.66" r="27.17" class="cls-1"/>
      <path d="M40.66 79.15a38.49 38.49 0 1 1 38.49-38.49 38.53 38.53 0 0 1-38.49 38.49zm0-76.07a37.58 37.58 0 1 0 37.58 37.58A37.63 37.63 0 0 0 40.66 3.08z" class="cls-1"/>
      <path d="M26.83 5.1a38.16 38.16 0 1 0 13.83-2.6" class="path"/>
    </g>
  </g>
</svg> 
</div>

1

Safari不支持负dashoffset。您需要通过反转路径并使dashoffset以另一种方式进行动画来解决这个问题。

完美，谢谢！（通过将我的描边路径转换为复合路径，并使用Illustrator中的属性窗口来反转方向，我成功解决了问题，以防将来有其他人遇到此问题！） - Noah Brennan
0

我在SVG圆形动画中遇到了同样的问题。我想让动画逆时针进行。最终通过水平翻转圆形并使用正的虚线偏移解决了这个问题。

我使用了变换来翻转圆形。

scale(-1 1)

请参考 CodePen 上的示例。

https://codepen.io/rikki404/pen/YzydPJq

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接