SVG
benutzen
Suche…
Parameter
Parameter | Einzelheiten |
---|---|
x | X-Achsenkoordinate der oberen linken Ecke |
y | y-Achsenkoordinate der oberen linken Ecke |
Breite | Breite des Elements <use> |
Höhe | Höhe des Elements <use> |
xlink: href | Ressourcenbezeichner (verweist auf die ID eines anderen Elements) SVG 2 schlägt vor, dies abzulehnen und durch ein einfaches href-Attribut zu ersetzen |
Bemerkungen
Details finden Sie in der W3C-Empfehlung für SVG sowie in der neuen Kandidatenempfehlung für SVG2
Symbol verwenden
Das <use>
-Element wird häufig für wiederverwendbare Symbole in Verbindung mit dem <symbol>
-Element verwendet. Das sieht so aus:
<svg>
<symbol viewBox="0 0 16 16" id="icon-star">
<path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</symbol>
</svg>
Und das Element <use>
:
<svg>
<use xlink:href="#icon-star"/>
</svg>
Das Element <use>
kopiert das <symbol>
und zeigt es an. Sie können auch die Stile in den <symbol>
für einzelne <use>
-Elemente überschreiben, z
<style>
.red {
fill: red;
}
</style>
<svg>
<use class="red" xlink:href="#icon-star"/>
</svg>
Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow