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"