SVG文件沒有顯示在移動設備中，但顯示在谷歌Chrome瀏覽器下

Question

SVG文件沒有顯示在移動設備中，但顯示在谷歌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. 最後你xmlns和xlink聲明在<svg>標籤是錯誤的。你不能選擇爲這些人提供什麼。他們硬連線到一個特定的價值。雖然它看起來像一個URL，但實際上並不是。這是一個字符串常量。他們有是：

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