SVG <use> Element

Der SVG <use>-Element kann SVG-Formen in anderen Positionen (einschließlich <g>- und <symbol>-Elementen) im SVG-Dokument wiederverwenden. Sie können wiederverwendbare Shapes im Inneren des <defs>-Elements (damit sind Shapes bis zum Verwenden unsichtbar) oder außen definieren.

use-Beispiel

Dies ist ein einfaches Beispiel für das <use>-Element:

<svg width="500" height="100">
　　　　<defs>
　　　　　　　　<g id="shape">
　　　　　　　　　　　　<rect x="0" y="0" width="50" height="50"　></rect>
　　　　　　　　　　　　<circle cx="0" cy="0" r="50"　></circle>
　　　　　　　　</g>
　　　　</defs>
　　　　<use xlink:href="#shape" x="50" y="50"　></use>
　　　　<use xlink:href="#shape" x="200" y="50"　></use>
　　　　<circle cx="50"cy="50"r="5"style="fill:#0000ff;"></circle>
　　　　<circle cx="200"cy="50"r="5"style="fill:#0000ff;"></circle>
</svg>

Dieser Beispiel zeigt das <g>-Element, das im <defs>-Element definiert wurde. Dies macht das <g>-Element unsichtbar, es sei denn, es wird durch das <use>-Element referenziert.

Bevor das <g>-Element referenziert wird, muss es durch sein ID-Attribut mit einem ID versehen werden. Das <use>-Element tut dies durch das xlink:href-Attribut. Beachten Sie den vor dem ID stehenden #.

Das <use>-Element bestimmt anhand seiner x- und y-Attribute, wo der wiederverwendete Shape angezeigt wird. Bitte beachten Sie, dass die Shapes im Inneren des <g>-Elements an der Position 0,0 liegen. Dies geschieht, weil ihre Positionen in die Position des <use>-Elements eingefügt wurden.

Nach dem Ausführen das Bildergebnis:

Der blaue Punkt ist nicht Teil des Beispiels. Er wurde hinzugefügt, um die x- und y-Koordinaten der beiden <use>-Elemente anzuzeigen.

Verwendung von Shapes außerhalb von <defs>-Elementen

Das <use>-Element kann SVG-Bilder in jeder Position wiederverwenden, solange das Shape ein einzigartiges id-Attribut hat. Hier ist ein Beispiel:

<svg width="500" height="110">　　　　
<g id="shape2">　　　　
<rect x="0" y="0" width="50" height="50"　/>　　　　
</g>　　　　
<use xlink:href="#shape2" x="200" y="50"　/>　　　　
<circle cx="200"cy="50"r="5"style="fill:#0000ff;"/>　　　　
</svg>

In diesem Beispiel wird ein <g>-Element definiert, das ein <rect>-Element enthält. Dann wird das <g>-Element (einschließlich der eingebetteten <rect>-Elemente) durch das <use>-Element wiederverwendet.

Nach dem Ausführen das Bildergebnis:

Bitte beachten Sie, dass sowohl das ursprüngliche Shape als auch seine wiederverwendete Version angezeigt werden. Dies geschieht, weil das zu wiederverwendende Shape (g-Element) nicht im <defs>- oder <symbol>-Element definiert wurde. Daher ist es sichtbar.

Gleichzeitig wird der blauene Punkt die Koordinaten des <use>-Elements anzeigen.

CSS-Styles festlegen

Wenn keine CSS-Styles auf dem ursprünglichen Shape gesetzt sind, können Sie beim Wiederverwenden des Shapes CSS-Styles festlegen. Sie müssen nur die Styles angeben, die im style-Attribut des <use>-Elements festgelegt werden sollen. Dies ist ein Beispiel:

<svg width="500" height="110">
　　<g id="shape3">
　　　　　　<rect x="0" y="0" width="50" height="50"　/>
　　</g>
　　<use xlink:href="#shape3" x="100" y="50" style="fill: #00ff00;"/>
　　<use xlink:href="#shape3" x="200" y="50" style="stroke: #00ff00; fill: none;"/>
</svg>

Beachten Sie, dass keine style-Attribut auf dem ursprünglichen Shape gesetzt wurde. Anschließend wird der Standardstil (normalerweise schwarz) verwendet, um zu rendern.