SVG线动画在Safari中颠倒过来？

Question

我为一个网站构建了非常简单的旋转动画，并且它们在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

Answer 1

Safari不支持负dashoffsets。你需要通过颠倒你的路径并让dashoffset以其他方式动画来解决这个问题。