SVG
Patrones
Buscar..
Parámetros
parámetro | descripción |
---|---|
Unidades de patrón | el sistema de coordenadas de los atributos de patrón, ya sea objectBoundingBox (predeterminado) o userSpaceOnUse |
patternContentUnits | el sistema de coordenadas de los contenidos del patrón ya sea objectBoundingBox o userSpaceOnUse (predeterminado) |
patternTransform | La transformación a aplicar a los contenidos del patrón. |
X | el desplazamiento x del patrón (el valor predeterminado es cero) |
y | el desplazamiento y del patrón (el valor predeterminado es cero) |
anchura | el ancho del patrón (requerido) |
altura | la altura del patrón (requerido) |
xlink: href | Enlace a otro patrón que proporciona algunos atributos o contenido. |
preservar la relación de aspecto | si la relación de aspecto del patrón debe ser preservada |
Observaciones
De forma predeterminada, el patrón se creará en mosaico al establecer el centro de la unidad de patrón en la esquina superior izquierda de la forma.
Ejemplo de patrón con unidades objectBoundingBox
<svg width="400" height="400">
<defs>
<pattern id="pattern1" width="0.2" height="0.2" patternUnits="objectBoundingBox">
<circle cx="10" cy="10" r="10" fill="#0000ff" />
</pattern>
</defs>
<rect x="10" y="10" width="100" height="100" stroke="black" fill="url(#pattern1)"/>
</svg>
Cobertura de patrones con combinaciones de Unidades de patrones y Unidades de contenido de patrones
Los patrones SVG se comportan de manera significativamente diferente a las imágenes de fondo CSS al rellenar formas equivalentes. Esto puede llevar a sorpresas significativas para los recién llegados a SVG. A continuación se muestran ejemplos de un patrón definido en todas las combinaciones posibles de patternUnits y patternContentUnits, que muestran cómo estas configuraciones afectan el comportamiento de relleno.
<svg width="800px" height="800px">
<defs>
<pattern id="pattern1" x="0" y="0" width="0.2" height="0.2" patternUnits="objectBoundingBox" patternContentUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
<pattern id="pattern2" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox">
<circle cx=".1" cy=".1" r="0.1" fill="blue" />
</pattern>
<pattern id="pattern3" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
<pattern id="pattern4" x="0" y="0" width="0.2" height="0.2" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
<circle cx=".1" cy=".1" r="0.1" fill="blue" />
</pattern>
</defs>
<rect x="10" y="10" width="100" height="100" stroke="black" fill="url(#pattern1)"/>
<rect x="150" y="10" width="200" height="150" stroke="black" fill="url(#pattern1)"/>
<text x="10" y="200">patternUnits="objectBoundingBox" (20% of shape)</text>
<text x="10" y="220">patternContentUnits="userSpaceOnUse" (20px circle) </text>
<text x="10" y="240" stroke="blue" stroke-width="1">(Units used by default)</text>
<rect x="10" y="310" width="100" height="100" stroke="black" fill="url(#pattern3)"/>
<rect x="150" y="310" width="200" height="150" stroke="black" fill="url(#pattern3)"/>
<text x="10" y="500">patternUnits="userSpaceOnUse" (10px square box)</text>
<text x="10" y="520">patternContentUnits="userSpaceOnUse" (20px circle) </text>
<rect x="410" y="10" width="100" height="100" stroke="black" fill="url(#pattern2)"/>
<rect x="550" y="10" width="200" height="150" stroke="black" fill="url(#pattern2)"/>
<text x="410" y="200">patternUnits="userSpaceOnUse" (10px square box)</text>
<text x="410" y="220">patternContentUnits="objectBoundingBox"(radius="10%") </text>
<rect x="410" y="310" width="100" height="100" stroke="black" fill="url(#pattern4)"/>
<rect x="550" y="310" width="200" height="150" stroke="black" fill="url(#pattern4)"/>
<text x="410" y="500">patternUnits="objectBoundingBox" (20% of shape)</text>
<text x="410" y="520">patternContentUnits="objectBoundingBox"(radius="10%") </text>
</svg>
ejemplos de patrones de transformación
<svg width="800px" height="800px">
<defs>
<pattern id="pattern1" x="0" y="0" width="0.2" height="0.2" >
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
<pattern id="pattern2" x="0" y="0" width="0.2" height="0.2" patternTransform="scale(1.5)">
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
<pattern id="pattern3" x="0" y="0" width="0.2" height="0.2" patternTransform="skewX(45)">
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
<pattern id="pattern4" x="0" y="0" width="0.2" height="0.2" patternTransform="matrix(1.5,-.70,.10,1.1,-30,10)">
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
</defs>
<rect x="10" y="10" width="100" height="100" stroke="black" fill="url(#pattern1)"/>
<rect x="150" y="10" width="200" height="150" stroke="black" fill="url(#pattern1)"/>
<text x="10" y="200">Original</text>
<rect x="410" y="10" width="100" height="100" stroke="black" fill="url(#pattern2)"/>
<rect x="550" y="10" width="200" height="150" stroke="black" fill="url(#pattern2)"/>
<text x="410" y="200">patternTransform="scale(1.5)"</text>
<rect x="10" y="310" width="100" height="100" stroke="black" fill="url(#pattern3)"/>
<rect x="150" y="310" width="200" height="150" stroke="black" fill="url(#pattern3)"/>
<text x="10" y="500">patternTransform="skewX(45)"</text>
<rect x="410" y="310" width="100" height="100" stroke="black" fill="url(#pattern4)"/>
<rect x="550" y="310" width="200" height="150" stroke="black" fill="url(#pattern4)"/>
<text x="410" y="500">patternUnits="matrix(1.5,-.70,.10,1.1,-30,10)"</text>
</svg>
Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow