SVG Füllmuster

SVG-Füllmuster werden verwendet, um Formen mit Mustern aus Bildern zu füllen. Das Muster kann aus SVG-Bildern (Formen) oder Bitmap-Bildern bestehen. SVG-Füllmuster sehen so aus, wie Sie es von Photoshop usw. gewohnt sind und werden als "Kachelung" bezeichnet.

Beispiel für ein Füllmuster

Dies ist ein einfaches Beispiel für ein SVG-Füllmuster:

<svg width="500" height="150">
　　　　<defs>
　　　　　　　　<pattern id="pattern"1" x="10"　y="10"　width="20"　height="20" patternunits="userSpaceOnUse">
　　　　　　　　　　　　<circle　cx="10"　cy="10"　r="10" style="stroke:　none;　fill:　#0000ff"></circle>
　　　　　　　　</pattern>
　　　　</defs>
　　　　<rect　x="10"　y="10"　width="100"　height="100" style="stroke: #000000; fill: url(#pattern1);"></>
</svg>

Zunächst, definieren Sie im <defs>-Element das <pattern>-Element. Das Muster enthält ein <circle>-Element. Dieses <circle>-Element wird als Füllmuster verwendet.

Zweitens, in den CSS-Attributen<rect>Erklärung eines Elementsfill, das darauf verweist<pattern>seinestyleElement-ID.

Zweitens, erklären Sie ein <rect>-Element, das auf den <pattern>-Element-ID in den Styl-attributen des CSS verweist.

Nach dem Ausführen der Bildwirkung:

Beachten Sie, wie der Kreis, der im <pattern>-Element definiert ist, als Füllung für das Rechteck verwendet wird. Beachten Sie auch, wie der Kreis von links nach rechts und von oben nach unten ständig wiederholt wird.

X, Y, Breite und Höhe

Die Attribute x und y des <pattern>-Elements definieren den Abstand, an dem das Muster im Musterbeginn des <pattern>-Elements beginnt.

Die Attribute width und height des <pattern>-Elements definieren die Breite und Höhe des Musters.

Dies ist ein Beispiel, das von vorne beginnt und weitergehtxundygesetzt auf 0:

<svg width="500" height="150">
　　　　<defs>
　　　　　　　　<pattern id="pattern"2"
　　　　　　　　　　　　　　　　　x="0" y="0" width="20"　height="20"
　　　　　　　　　　　　　　　　　patternUnits="userSpaceOnUse"
　　　　　　　　<circle　cx="10"　cy="10"　r="10" style="stroke:　none;　fill:　#0000ff"></circle>
　　　　　　　　</pattern>
　　　　</defs>
　　　　<rect　x="10"　y="10"　width="100"　height="100"
　　　　　　　　　　style="stroke:　#000000;　fill:　url(#pattern"2);"　/>
</svg>

Nach dem Ausführen der Bildwirkung:

Beachten Sie, dass das Muster jetzt vom Mittelpunkt des Kreises beginnt (oben und links des Rechtecks). Beim Erstellen eigener Füllmuster verwenden SiexundyWerte, um das gewünschte Ergebnis zu erzielen.

widthundheightAttribute festgelegte Breite und Höhe des Musters.

Im vorherigen Beispielwidth,heightsind alle20, d.h. den Durchmesser des Kreises, gesetzt. Daher wiederholen sich die Kreise immer wieder, ohne Lücken.

In diesem Beispiel ist das width (Breite) des Musters auf25ist, anstatt20. Beachten Sie, dass jetzt zwischen den horizontalen Kreisen5Pixel-Abstand.

Dies ist auch einheightgesetzt25 Beispiel:

Hier ist das gleiche Beispiel, aber x und y sind auf10 (Mittelpunkt des <pattern>-Elements):

Jetzt beginnt das Muster mit einem vollständigen Kreis, aber es gibt immer noch vertikale und horizontale Überschüsse.

Nesting-Muster

Es ist möglich, Füllmuster zu nesting, so dass das Füllmuster innen ein anderes Füllmuster verwendet. Dies ist ein Beispiel, bei dem ein Rechteck mit einem kreisförmigen Füllmuster verwendet wird. Der innere Kreis verwendet ein Rechteck als Füllmuster.

<svg width="500" height="150">　　　　
<defs>　　　　
<pattern id="innerPattern"　　　　
x="3"　y="3"　width="9" height="9"　　　　
patternUnits="userSpaceOnUse"　　　　
>　　　　
<rect x="0" y="0" width="6" height="6"　　　　
style="stroke:　none;　fill:　#ff0000;"　/>　　　　
</pattern>　　　　
<pattern id="outerPattern"　　　　
x="12"　y="12"　width="25" height="25"　　　　
patternUnits="userSpaceOnUse"　　　　
>　　　　
<circle　cx="10"　cy="10"　r="10" style="stroke:　#0000ff;　fill:　url(#innerPattern)"　/>　　　　
</pattern>　　　　
</defs>　　　　
<rect　x="10"　y="10"　width="100"　height="100"　　　　
style="stroke:　#000000;　fill:　url(#outerPattern);"　/>　　　　
</svg>

Nach dem Ausführen der Bildwirkung:

Wie Sie sehen können, wird jetzt der äußere Rechteck durch einen Kreis gefüllt, und der Kreis wird wiederum durch ein Rechteck gefüllt.

Musterumwandlung

Standard SVG-Transformationfunktionen können verwendet werden, um die Füllmuster zu transformieren. Dies kann durch die property patternTransform erreicht werden. Ein Beispiel für die Transformation eines SVG-Musters ist:

<svg width="500" height="150">　　　　
<defs>　　　　
<pattern id="transformedPattern"　　　　
x="10"　y="10"　width="20"　height="20"　　　　
patternUnits="userSpaceOnUse"　　　　
patternTransform="rotate(35)"　　　　
>　　　　
<circle　cx="10"　cy="10"　r="10"　style="stroke:　none;　fill:　#0000ff"　/>　　　　
</pattern>　　　　
</defs>　　　　
<rect　x="10"　y="10"　width="100"　height="100"　　　　
style="stroke:　#000000;　fill:　url(#transformedPattern);"　/>　　　　
</svg>

Dieses Beispiel definiert ein einfaches Muster, das vor der Verwendung als Füllmuster für Rechtecke um35Nach dem Lauf der Bildeffekt: