SVG <pattern> Element

SVG kann das <pattern>-Element zur Definition von Mustern verwenden. Es wird verwendet, um Grafikelemente mit einem Muster zu füllen.

Um ein Objekt mit vorgegebenen Formen zu füllen oder zu umranden, muss das <pattern>-Element verwendet werden. Das <pattern>-Element ermöglicht es, vorgegebene Formen in festen Abständen auf der x- und y-Achse zu wiederholen (oder zu verkleben), um den zu bemalenden Bereich zu überdecken. Definieren Sie zunächst das Muster mit dem <pattern>-Element und verwenden Sie dann die Attribute fill oder stroke, um das zu füllende oder zu umrandende Muster auf dem angegebenen Grafikelement zu referenzieren.

<svg　width="120"　height="120"　viewBox="0　0　120　120"　　　　
xmlns="http://www.w3.org/2000/svg"　version="1.1"　　　　
xmlns:xlink="http://www.w3.org/1999/xlink">　　　　
<defs>　　　　
<pattern　id="Triangle"　width="10"　height="10"　patternUnits="userSpaceOnUse">　　　　
<polygon　points="5,0　10,10　0,10"/>　　　　
　　　　</pattern>　　　　
</defs>　　　　
<circle　cx="60"　cy="60"　r="50"　　fill="url(#Triangle)"/>　　　　
</svg>

Das Ausgabergebnis ist wie folgt:

Erklärung der Verwendung

• Das id-Attribut von <pattern> definiert den eindeutigen Namen des Musters.

• patternUnits wird verwendet, um die Eigenschaften x, y, Breite und Höhe zu definieren.

• cx und cy sind die x- und y-Achsenkoordinaten des Musters Rahmens.