SVG-Datei wird nicht auf den mobilen Geräten angezeigt, aber es wird unter Google Chrome Browser angezeigt

Question

SVG-Datei wird nicht auf den mobilen Geräten angezeigt, aber es wird unter Google Chrome Browser angezeigt.

<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

Es gibt eine Menge Dinge, die mit Ihrer Probe nicht stimmen.

1. <img> ist kein gültiges SVG-Element. SVGs verwenden das Element <image>.

2. <p> ist kein gültiges SVG-Element. Es ist nur HTML. Wenn Sie Text in Ihr SVG einfügen möchten, müssen Sie das Element <text> verwenden.

3. In <image> Elemente referenzieren Sie die externe Datei mit dem Attribut xlink:href. src ist eine HTML-Sache.

4. Sie haben ein ungültiges height Attribut in Ihrem Bild. Entfernen Sie das Semikolon.

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

5. Schließlich Ihre xmlns und xlink Erklärungen in Ihrem <svg> Tag sind falsch. Sie können nicht wählen, was Sie für diese setzen möchten. Sie sind fest auf einen bestimmten Wert festgelegt. Obwohl es wie eine URL aussieht, ist es das nicht. Es ist eine Stringkonstante. Sie sein müssen:

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