SVG als CSS-Background nutzen: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
| (8 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 12: | Zeile 12: | ||
Quelle und erste Einführung: https://www.w3schools.com/graphics/svg_polygon.asp | Quelle und erste Einführung: https://www.w3schools.com/graphics/svg_polygon.asp | ||
== Grundformen == | |||
=== Kreis === | |||
<syntaxhighlight lang="html"> | |||
<svg height="100" width="100"> | |||
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> | |||
Sorry, your browser does not support inline SVG. | |||
</svg> | |||
</syntaxhighlight> | |||
=== Rechteck === | |||
<syntaxhighlight lang="html"> | |||
<svg width="400" height="110"> | |||
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /> | |||
Sorry, your browser does not support inline SVG. | |||
</svg> | |||
</syntaxhighlight> | |||
=== Linie mit unterschiedlichen Punkten === | |||
Beispiel Treppe | |||
<syntaxhighlight lang="html"> | |||
<svg height="180" width="500"> | |||
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" /> | |||
Sorry, your browser does not support inline SVG. | |||
</svg> | |||
</syntaxhighlight> | |||
= Farben = | = Farben = | ||
* werden | * werden für die Fläche über "fill" definiert | ||
# | * werden für den Rand über "stroke" definiert | ||
* vordefinierte Farbtöne (https://wiki.selfhtml.org/wiki/Grafik/Farbe/Farbpaletten#Farbnamen) funktionieren ohne Probleme | |||
https://codepen.io/gunnarbittersmann/pen/BoovjR | * damit Hex-Codes funktionieren, muss %23 statt # geschrieben werden (das ist der Wert des maskierten #-Zeichens) --> https://codepen.io/gunnarbittersmann/pen/BoovjR | ||
= "Icons" = | = "Icons" = | ||
| Zeile 25: | Zeile 55: | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 166"><polygon fill=" | background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 166"><polygon fill="red" points="83 26.8 65.7 61.8 27.1 67.4 55 94.7 48.5 133.2 83 115 117.5 133.2 111 94.7 138.9 67.4 100.3 61.8 83 26.8 83 26.8"/></svg>'); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Zeile 31: | Zeile 61: | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
background-image: url( | background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23239de8%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23239de8%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E"); | ||
</syntaxhighlight> | |||
Farbe anpassen: "fill%3D%22%23239de8" (hellblau) durch "fill%3D%22%23cccccc" (grau) ersetzen | |||
== Kreis == | |||
<syntaxhighlight lang="css"> | |||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle fill="%23CCCCCC" cx="10" cy="10" r="10"/></svg>') | |||
</syntaxhighlight> | </syntaxhighlight> | ||
[[Kategorie:Web-Entwicklung]] | |||
Aktuelle Version vom 16. Februar 2022, 20:24 Uhr
Grundsätzliches[Bearbeiten]
- Einbindung via SVG bzw. Polygon-Element
- nach folgender Struktur
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Quelle und erste Einführung: https://www.w3schools.com/graphics/svg_polygon.asp
Grundformen[Bearbeiten]
Kreis[Bearbeiten]
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
Sorry, your browser does not support inline SVG.
</svg>
Rechteck[Bearbeiten]
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
Sorry, your browser does not support inline SVG.
</svg>
Linie mit unterschiedlichen Punkten[Bearbeiten]
Beispiel Treppe
<svg height="180" width="500">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
Sorry, your browser does not support inline SVG.
</svg>
Farben[Bearbeiten]
- werden für die Fläche über "fill" definiert
- werden für den Rand über "stroke" definiert
- vordefinierte Farbtöne (https://wiki.selfhtml.org/wiki/Grafik/Farbe/Farbpaletten#Farbnamen) funktionieren ohne Probleme
- damit Hex-Codes funktionieren, muss %23 statt # geschrieben werden (das ist der Wert des maskierten #-Zeichens) --> https://codepen.io/gunnarbittersmann/pen/BoovjR
"Icons"[Bearbeiten]
Stern[Bearbeiten]
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 166"><polygon fill="red" points="83 26.8 65.7 61.8 27.1 67.4 55 94.7 48.5 133.2 83 115 117.5 133.2 111 94.7 138.9 67.4 100.3 61.8 83 26.8 83 26.8"/></svg>');
Pfeil[Bearbeiten]
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23239de8%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23239de8%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
Farbe anpassen: "fill%3D%22%23239de8" (hellblau) durch "fill%3D%22%23cccccc" (grau) ersetzen
Kreis[Bearbeiten]
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle fill="%23CCCCCC" cx="10" cy="10" r="10"/></svg>')