皆さんこんにちは、ニューステラの井上です。
現在自社サイトのリニューアルに伴い、トップページのファーストビューにSVGアニメーションを実装中なのですが、Safariで致命的な表示崩れが発生しました。

下記のCodePenに投稿されているコードを参考に、独自のカスタマイズを加えて制作。

See the Pen
Animating SVG text by Fabio Ottaviani (@supah)
on CodePen.

完成した後にMacやiPhone/iPadなどのAppleデバイスで確認作業を行っていたところ、Safariブラウザにて表示崩れ(アニメーションの動きがおかしかったり一部のテキストが欠けたり) のバグが確認できたため、上記CodePenも確認すると、元のコードの時点でバグが確認できました。私が制作したものは日本語だったことから余計に崩れ方が酷かったです。ちなみにGoogle Chrome等のブラウザでは問題ありません。WindowsのMicrosoft EdgeやAndroid標準のブラウザでも正常に動きました。IEはもちろん駄目ですが、そこはもう無視しましょう。

こちらのCodePenのコードではテキストを自由に改変できて非常に便利なのですが、iOS/iPadOS/macOSユーザーはまだまだSafariを使用している方も多く、IEはともかくAppleユーザーさんを無視することはできないため、このまま使用するのは現実的ではありません。

原因を探っていったところ、SVGの<text>要素を使用した場合、Safariでは他のブラウザとは異なる挙動をすることがわかりましたので、<path>要素で実装してみたところ、当該バグは発生しないことが確認できました。根本的な原因までは特定できていませんが、思い通りのアニメーションを実装できたので深追いは止めました。

Illustratorで好みのフォントにてテキストを作ってSVG書き出し、そのSVGコードをHTML等に貼り付けてクラスを追加、CSS側をオリジナルのコードに変更…などなどしてあげることで対処しました。Illustratorで作成したテキストデータはアウトライン化が必要です。(アウトラインを取らずにSVG書き出しすると<path>ではなく<text>で書き出されるため)

完成したアニメーションはこちらです。
※右下のReturnボタンをクリックするとアニメーションが最初から再生されます。

See the Pen
Untitled by Shotaro Inoue (@sho987i)
on CodePen.

ちなみに<text>要素のままでも、CSS側でstroke-dashoffsetやstroke-dasharrayの値を工夫することで無理やり対応することもできましたが、それだと狙ったモーションが実装できなかったです。SVGによるテキストアニメーションやストロークアニメーションを実装する場合は、<path>要素で実装しておいた方が無難そうです。

より具体的な原因や良い対処法がわかる方がいらっしゃいましたらコメントいただけると幸いです。
以上、備忘録も兼ねて久しぶりのブログ投稿でした。