CSS, HTML und Javascript mit {stil}

SVG use – Formen klonen

svg-use

Aufwändige Formen und ganze Gruppen von Formen lassen sich mit dem use-Tag an beliebigen Positionen der Grafik wiederholen und dabei auch 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 erzeugt und durch transform="translate" gegen das Original verschoben, durch rotate gedreht und durch 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 klonen

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

SVG Elemente mit use klonen

use klont einzelne Elemente und ganze Gruppen von Elementen.

Wenn einzelne Elemente mit use geklont 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 Klonen 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


    Farbton

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.