SVG文件在移动设备上无法显示，但在谷歌浏览器下可以显示。

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>

- Narayanan

Answer 1

您的示例存在许多问题。

1. <img> is not a valid SVG element. SVGs use the <image> element.

2. <p> is not a valid SVG element. It is HTML only. If you want to put text in your SVG, you need to use the <text> element.

3. In <image> elements you reference the external file with the xlink:href attribute. src is an HTML thing.

4. You have an invalid height attribute in your image. Remove the semicolon.

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

5. Lastly your xmlns and xlink declarations in your <svg> tag are wrong. You can't choose what to put for those. They are hardwired to a specific value. Although it looks like a URL it is actually not. It is a string constant. They have to be:

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

- Paul LeBeau