最新記事 ≫ 釜山・田浦(西面)付近おすすめのおしゃれカフェ!

【SVG】リンクのSVGがスマホで表示されない時がある

CSS

PCでは表示されているのに、スマホで確認すると表示されたり、されなかったり・・

という現象が起こったので、その時の解決法を!

スポンサーリンク

今回のSVG画像

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27" height="27" viewBox="0 0 27 27">
 <image width="27" height="27" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/・・・・・・>
</svg>

SVG Image Tagを利用している画像です。

これをHTML側で、imgタグで表示をしていました。

<a href="/">
 <img src="/img/logo.svg" alt="logo">
</a>

このコードだとなぜかスマホで、2回に1回ぐらい表示されない現象が・・

原因までは変わらなかったのですが、下記のやり方で表示されるようになりました。

解決法

imgタグではなく、objectタグを利用する

<a href="/">
 <span>
  <object data="/img/logo.svg" type="image/svg+xml"></object>
 </span>
</a>
objectタグをaタグで囲む場合

objectタグをaタグで囲ってもリンクにならないので、cssに下記を追加

object {
    pointer-events: none;
}

リンクになっても、画像全体がリンクにならない問題が起きます・・・・

さらにcssに下記を追加

object {
 pointer-events: none;
 position: relative;
 z-index: -1
}

a {
  display: inline-block;
  position: relative;
  z-index: 1;
}

a span {
 display: inline-block;
}

これで画像を全体をクリックできるようになり、スマホでSVGが表示されるようになりました。

コメント

タイトルとURLをコピーしました