Wie SVG-Datei als Hintergrund

Ich bin ein Neuling in die SVG-Welt, begann gerade heute zu experimentieren. Ich versuche, eine mobile Website zu erstellen, auf der die primären Grafiken skalierbar sind und somit alle Bildschirmauflösungen unterstützen.Wie SVG-Datei als Hintergrund

Ich habe eine SVG-Datei für meine Eingabe (derzeit Typ = "Bild") erstellt, und überraschend sind die Ergebnisse wie erwartet in meinem Code-Editor (Coda). Beim Testen (Mobile Safari, DT Safari und DT FF) zeigt die Eingabe den Platzhalter für den Platzhalter für unterbrochene Bilder an (der Eid ist korrekt, weil ich mit der rechten Maustaste klicken kann, um die Datei herunterzuladen).

Wie kann ich meine SVG-Datei in das Dokument (html5) einfügen?

Quelle

2010-12-27 e_known

ich jetzt gelernt, dass SVG-Unterstützung für mobile Surfen nicht ganz abgeschlossen ist, finden Sie unter http: // caniuse. com/# Katzen = SVG.Ich werde das jetzt nicht implementieren, aber ich bin sehr neugierig auf die Antwort. –

Siehe Using SVG in background-image. Die CSS für ein Hintergrundbild in einer Eingabe Platzierung ist die gleiche wie für jedes anderes Element:

input { background-image:url('foo.svg') }

Quelle

2010-12-27 20:13:51 Phrogz

Ehrfürchtig. Vielen Dank! Ich denke, wir müssen nur auf volle Unterstützung warten. –

Wird derzeit nicht in allen Browser-Rendering-Engines unterstützt. Oder, sollte ich sagen, es wird nicht von den Browsern unterstützt, die die Leute benutzen.

1> Alternativen sind XML Inline oder HTML Inline als XML-Dokument geliefert ... auch nicht gut unterstützt, wie ich dies eintippe.

2> einbetten,

3> Objekt

4> iframe (verursacht eine kleine Leistung als Seite getroffen wird heruntergeladen)

5> Googles svgweb auch verwendet werden kann; Ich habe nicht versucht, Svgweb als Hintergrundebene zu verwenden, obwohl es gut funktionieren sollte.

Wenn Sie nichts Komplexeres tun als ein Bild, keine Skripte usw. usw. wird SVGWeb in fast jedem Browser korrekt angezeigt. Es verwendet VML, um Unterstützung für ältere IE-Browser bereitzustellen, nutzt native Unterstützung, wenn verfügbar, und verwendet zu guter Letzt eine Flash-Schnittstelle, um das SVG anzuzeigen.

Die "komplexere" Schwierigkeit ist, wenn Browser grundlegende native Unterstützung haben, die nicht beinhaltet, was svgweb tun kann, und Sie Dinge tun wollen, die nicht von diesem Browser unterstützt werden. Dann müssen Sie den Flash-Modus erzwingen.

http://code.google.com/p/svgweb/

Quelle

2010-12-27 18:43:43 Wayne

Das war eine großartige Antwort vor 7 Jahren. http://caniuse.com/#feat=svg-img –

Sie können auch Inline-SVG, etwa so:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
    </head> 
    <body> 
     <h2>Red Circle via SVG</h2> 
     <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"> 
      <circle id="redcircle" cx="50" cy="50" r="50" fill="red" /> 
     </svg> 
    </body> 
</html>

Dieser in IE 9 unterstützt wird, FF 5, und Chrome 12, aber nicht Safari 5, auf Win 7.

Zugegeben, dies ist kein Hintergrundbild, aber Sie könnten etwas CSS verwenden, um das zu beheben.

Edit: Anders fragt, "Wie würdest du diese 'Inline' Svg als Hintergrundbild verwenden?" LMGTFY, Anders. Hier ist eine Antwort:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <style type="text/css"> 
      span { position: absolute; }  
      span.svg { z-index: -1; } 
     </style> 
    </head> 
    <body> 
     <h2>Red Circle via SVG</h2> 
     <div> 
      <span> 
       <p>Use CSS to position the circle and put it in the background "behind" the text.</p> 
      </span> 
     </div> 
     <div> 
      <span class="svg"> 
       <svg id="svgelem" height="100" xmlns="http://www.w3.org/2000/svg"> 
        <circle id="redcircle" cx="50" cy="50" r="50" fill="red" /> 
       </svg> 
      </span> 
     </div> 
    </body> 
</html>

Hier ist, wie Chrome 41 auf Win 7 es macht:

enter image description here

Quelle

2011-06-23 15:50:28

Wie würdest du diese "Inline" -SVG als Hintergrundbild verwenden? –

Antwort

Verwandte Themen