SVG 线条动画在 Safari 中反转？

Posted 2023-03-06

技术标签:

【中文标题】SVG 线条动画在 Safari 中反转？【英文标题】：SVG Line Animation Reversed in Safari? 【发布时间】：2018-02-22 17:17:43 【问题描述】：

我已经为一个网站构建了非常简单的旋转动画，它们在 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-1fill:#202020;opacity:0.1;
      .pathfill: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】：

为了不使用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-1fill:#202020;opacity:0.1;
      .pathfill: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>

【讨论】：

【参考方案2】：

对于 svg 圈子也有同样的问题。我希望动画逆时针进行。最后通过水平翻转圆圈并使用正虚线偏移来解决它。

我使用变换来翻转圆圈。