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以其他方式動畫來解決這個問題。