Elemento <pattern> de SVG

SVG puede usar el elemento <pattern> para definir patrones. Se utiliza para rellenar elementos gráficos de manera repetitiva.

Para rellenar o trazar un objeto con gráficos predefinidos, se utiliza el elemento pattern. El elemento pattern permite que los gráficos predefinidos se repitan (o se talle) en intervalos fijos en el eje x y el eje y, cubriendo así el área a colorear. Primero, defina el patrón utilizando el elemento pattern, y luego en los elementos gráficos dados, utilice las propiedades fill o stroke para referirse al patrón que se utilizará para rellenar o trazar.

<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"　ancho="10"　altura="10"　patternUnits="userSpaceOnUse">　　　　
<polygon　points="5,0　10,10　0,10"/>　　　　
　　　　</pattern>　　　　
</defs>　　　　
<circle　cx="60"　cy="60"　r="50"　　relleno="url(#Triangle)"/>　　　　
</svg>

El efecto de ejecución es como sigue:

Explicación de uso

• La propiedad id del <pattern> define el nombre único del patrón.

• patternUnits se utiliza para definir las propiedades de anchura, altura, ancho y altura.

• cx y cy son las coordenadas en el eje x e y del cuadro del límite del patrón.