web-dev-qa-db-ja.com

SafariでSVGの使用が機能しない

htmlファイルでこのsvgタグを使用しています。 Chromeでは完全に機能しますが、サファリではアイコンは表示されません

<svg width="25" height="23" viewBox="0 0 25 23">
       <use href="./icons.svg#helemet"></use>
 </svg>

理由を知っていますか？

htmlsvgsafari
18
Yonatan B

Safariはまだhrefをサポートしていません。代わりにxlink：hrefを使用する必要があります。

hrefは、今後のSVG 2仕様の新機能です。 xlink：hrefはSVG 1.1バージョンです。

Chrome、Firefox、およびEdgeは、xlink：hrefとhrefの両方をサポートしています。

44
Robert Longson

以下は、2019年の将来のアップデートです。xlink:

<svg role="img">
    <use xlink:href="/path/to/svg#id"></use>
</svg>

IOS 12で動作します

1
Kloshar4o