Patrón de relleno en SVG

El patrón de relleno de SVG se utiliza para rellenar formas con patrones compuestos de imágenes. El patrón puede estar compuesto por imágenes SVG (formas) o imágenes bitmap. El patrón de relleno de SVG se parece a lo que está acostumbrado en Photoshop, se llama "tessellation".

Ejemplo de patrón de relleno

Este es un ejemplo simple de patrón de relleno de SVG:

<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="10style="stroke: none; fill: #0000ff"></circle>
　　　　　　　　</pattern>
　　　　</defs>
　　　　<rect　x="10"　y="10"　width="100"　height="100" style="bordes: #000000; relleno: url(#pattern1);"></rect>
</svg>

Primero, defina el elemento <pattern> dentro del elemento <defs>. El patrón contiene un elemento circle. Este elemento circle se utilizará como patrón de relleno.

En segundo lugar, en las propiedades de CSS<rect>Declare un elementorellenoque reference<pattern>sustyleID del elemento en las propiedades.

En segundo lugar, declare un elemento <rect> que reference el ID del patrón en sus propiedades de estilo de la propiedad fill de CSS.

Efecto de la imagen después de ejecutar:

Tenga en cuenta cómo se utiliza el círculo definido en el elemento <pattern> como relleno de rectángulo. También note cómo los círculos se repiten de izquierda a derecha y de arriba a abajo.

X, Y, ancho y altura

Las propiedades x y y del elemento <pattern> definen la distancia desde el principio del patrón en el elemento <pattern>.

Las propiedades width y height del elemento <pattern> definen el ancho y la altura del patrón.

Este es un ejemplo desde el principio y continuaráxyyConfigurado a 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="10style="stroke: none; fill: #0000ff"></circle>
　　　　　　　　</pattern>
　　　　</defs>
　　　　<rect　x="10"　y="10"　width="100"　height="100"
　　　　　　　　　　style="stroke: #000000; fill: url(#pattern"2);"　/>
</svg>

Efecto de la imagen después de ejecutar:

Nota, cómo ahora el patrón comienza desde el centro del círculo (en la parte superior y izquierda del rectángulo). Al crear su propio patrón de relleno, utilizaráxyyvalores de las propiedades para lograr el efecto deseado.

widthyheightpropiedades configuradas para el ancho y la altura del patrón.

En el ejemplo anteriorwidth,heighttodos están configurados a20, es decir, el diámetro del círculo. Por lo tanto, los círculos se repiten una y otra vez sin espacios en el medio.

En este ejemplo, el ancho del patrón (width) se configura a25en lugar de20. Note que ahora hay5píxeles de separación.

Esto también es unheightConfigurado a25 Ejemplo:

A continuación, se muestra el mismo ejemplo, pero con x e y configurados a10 (Centro del círculo dentro del elemento <pattern>):

Ahora, el patrón comienza con un círculo completo, pero aún hay espacio vertical y horizontal adicional.

Patrón anidado

Se puede anidar patrones de relleno para que el patrón de relleno utilice otro patrón de relleno internamente. Este es un ejemplo en el que un rectángulo utiliza un círculo como patrón de relleno. El círculo utiliza un rectángulo como patrón de relleno internamente.

<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>

Efecto de la imagen después de ejecutar:

Como puede ver, el rectángulo externo ahora está relleno con un círculo, y el círculo está relleno con un rectángulo.

Conversión de patrón

Se puede utilizar la función de conversión de SVG estándar para convertir el patrón de relleno. Puede usar la propiedad patternTransform para lograr esto. A continuación, se muestra un ejemplo de conversión de patrón de SVG:

<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>

Este ejemplo define un patrón simple, que se ha girado antes de usarse como patrón de relleno de rectángulo35Efecto de imagen después de ejecutar: