SVG Line Animation 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をサポートしていません。パスを逆にして、ダッシュオフセットを別の方法でアニメーション化することで回避する必要があります。