モバイルデバイスにSVGファイルが表示されませんが、Google Chromeのブラウザの下に表示されます

Question

モバイルデバイスにはSVGファイルが表示されませんが、Google Chromeのブラウザに表示されます。

<li> 
    <svg class="listnew" xmlns="content/assest/airplane-mode-on.svg"  
    xlink="content/assest/airplane-mode-on.svg" width="100%" height="1000px" 
    viewBox="0 0 219.5 66"> 
    <g> 
    <img src="content/assest/fully-wi-fi-connected.svg" width="40%" 
    height="100px;" /> 
    <p class="text-content">4 Active Apps</p> 
    </g> 

    </svg> 

    </li> 

Answer 1

サンプルにはさまざまな問題があります。

1. <img>は有効なSVG要素ではありません。 SVGは<image>要素を使用します。

2. <p>は有効なSVG要素ではありません。それはHTMLのみです。 SVGにテキストを挿入する場合は、<text>要素を使用する必要があります。

3. <image>の要素では、xlink:href属性を持つ外部ファイルを参照します。 srcはHTMLのものです。

4. 画像に無効なheight属性があります。セミコロンを削除します。

   <image xlink:href="content/assest/fully-wi-fi-connected.svg" width="40%" height="100px" /> 
   

5. 最後に、あなたの<svg>タグであなたのxmlnsとxlink宣言は間違っています。あなたはそれらのために置くべきものを選ぶことはできません。彼らは特定の価値にハードワイヤードされています。 URLのように見えますが、実際にはそうではありません。これは文字列定数です。

   xmlns:svg="http://www.w3.org/2000/svg" 
   xmlns:xlink="http://www.w3.org/1999/xlink" 
   

：彼らはするを持っている