SVGのボーダーラインのアニメーションに関して教えてください。 以下のサイトを参考に「dasharray」「dashoffset」の値をアニメーションCSSでなぞってみたのですが、最新版のsafariでのみ、アニメーションの挙動が発生せず、最後の状態の瞬間だけレンダリングされる現象が発生しています。 https://jakearchibald.com/2013/animated-line-drawing-svg/ <path stroke="#000" stroke-width="4.3" fill="none" d="…" stroke-dasharray="1.00 1.00" stroke-dashoffset="0.00" /> 以下の値のように、明示的にでかい数値を入れることで正常動作をするようですが、 stroke-dasharray: 10000px; stroke-dashoffset: 10000px; 本来は、以下のように指定するのが筋だと思っています。 stroke-dasharray: calc(100% * 3.15); stroke-dashoffset: calc(100% * 3.15); /* アニメーション本体 */ @keyframes ＊＊＊ { 0% { stroke-dashoffset: calc(100% * 3.15); /* ★ */ } 100% { stroke-dashoffset: 0; } } ★本来は、この行も必要ないみたいですが、ネットの情報によると、これを指定しないとsafariのバグにぶつかるような情報もあったので、一応書いてみていますが、正直これの効果はよくわかりません・・・ また、いろいろ調べてみましたが、ギリギリsafariのバージョンが11の頃の古いPCがあったので、それで検証したところ、calcは正常に機能しており、逆に最新版のsafariだけが、デベロッパーツールで確認しても、 calc(100% * 3.15)の指定が適用されているにもかかわらず、アニメーションの挙動が正常に機能しません。 何か思い当たるところのある方がいれば情報をお願いします。