CSS, HTML und Javascript mit {stil}

SVG use – Elemente und Gruppen kopieren

svg-use

Aufwändige Formen und ganze Gruppen von Elementen lassen sich mit SVG use an beliebigen Positionen der Grafik kopieren, vergrößern, verkleinern und rotieren.

Weil SVG use eine Referenz oder einen Link auf ein vorhandenes Element setzt, braucht das SVG-Tag

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100%" height="100%" 
     viewBox="0 0 1045 627.1">
svg use, SVG Formen klonen

Jede Frucht ist nur einmal vertreten, alle weiteren Kopien der Früchte sind keine eigenständigen Formen, sondern werden durch use kopiert, mit transform="translate" gegen das Original verschoben, von rotate gedreht und mit scale verkleinert oder vergrößert.

<use transform="translate(652,-16) rotate(-15) scale(0.8)" xlink:href="#birne" />

Eine Form kann selber bereits geklonte Elemente enthalten – z.B. die schwarzen Kerne der Melone.

Formen in Inkscape kopieren

In Inkscape gibt es unter Bearbeiten den Befehl clone, um ein Element nicht einfach zu duplizieren, sondern durch ein sparsames use zu erzeugen.

SVG Elemente mit use kopieren

use kopiert einzelne Elemente und ganze Gruppen von Elementen.

Wenn einzelne Elemente mit use kopiert werden, kann das style-Attribut des geklonten Elements angepasst werden: neben der Position und der Größe lassen sich fill, stroke-width und stroke für jedes Element individuell vorgeben.

SVG media querys
<svg xmlns:xlink="http://www.w3.org/1999/xlink" 
     xmlns="http://www.w3.org/2000/svg" 
     viewBox="0 0 1183 728" 
     height="100%" width="100%">
    <circle r="364" cx="364" cy="364" fill="silver" />
    <defs>
        <path id="puzz" d="m 100,97 c -30,0 -54,24 -54,54.4 l 0, … z" />
    </defs>
    <use xlink:href="#puzz" fill="yellow" />
    <use transform="translate(690,50) rotate(90)" fill="blue" xlink:href="#puzz" />
    <use transform="translate(640,740) rotate(180)" fill="red" xlink:href="#puzz" />
    <use transform="translate(-80,580) rotate(-60)" fill="green" xlink:href="#puzz" />
</svg>

Der schwunghafte Stift besteht aus den Kopien eines langatmigen path-Elements: ein SVG use mit stroke-width:60px, der weiße Strich in der Mitte des Stifts ist ein path mit stroke-width:6px.

svg use, verschiedene Farben, different colors
<path id="p" style="fill:none" d="m 33.81,56.84 0,205.56 c 0,38.1 23.01,
   52.8 52.68,52.8 l 197.31,0 c 42,0 56.5,24.6 56 … " />
<use style="stroke-width:60px;stroke:#EFC12F" xlink:href="#p" />
<use style="stroke-width:6px;stroke:#fff" xlink:href="#p" />

SVG spiegeln

transform="scale(-1,1)" spiegelt entlang der X-Achse

transform="scale(1,-1)" spiegelt entlang der Y-Achse.

Damit ein Element mit use einfach und intuitiv platziert (und gespiegelt) werden kann, liegt sein Mittelpunkt am besten bei (0,0).

TWINS
<g id="wau">
…
</g>
<use transform="translate(440,140)" xlink:href="#wau" />
<use transform="translate(160,140) scale(-1,1)" xlink:href="#wau" />

textpath

textpath richtet einen Text mit xlink:href entlang eines Pfades aus.

svg textpath Text an Pfad ausrichten
<path id="p12" d="M 95,379 A … 95,379 Z" stroke="none" fill="none" stroke-width="0" />
<text x="170" y="500" font-size="60">
    <textPath xlink:href="#p12">Farbton</textPath>
</text>

Alternativ zu stroke=none, fill=none und stroke-width=0 kann der Pfad in ein defs-Element platziert werden, damit er in der Grafik nicht sichtbar ist.