IslaVisual
Ultima revisión 12/11/2012
Pattern: Definición de patrones en SVG
Los patrones ofrecen una de las formas más atractivas de relleno para SVG, pero también el más confuso. La clave es empezar poco a poco y construir capa sobre capa. En este punto, no te preocupes por nada, pero los elementos del patrón.
La creación de patrones, aunque en principio parezca complicado, es tan sencillo como utilizar formas, trayectorias, imaágenes, etc. Sólo hay que agruparlas dentro de una cláusula pattern. La relación entre el tamaño del lienzo y el patrón definirá su aspecto.
Dicho de otra manera, la creación de un patrón es como crear un documento SVG en pequeñito. Se definen las coordenadas que se desea que la vista muestre y el tamaño de la misma. A continuación, agregamos formas, trayectorias, imágenes, etc al patrón y ya está.
El patrón se repetirá a forma de mosaico. Por defecto el patrón se comportará como un evento de overflow tipo hidden de HTML, es decir, que si el patrón no entra entero, se recortará. Al igual que sucede con los degradados o gradientes, debemos definir el patrón dentro de defs para poder utilizarlo.
Los siguientes comandos están disponibles para los datos de la trayectoria:
Filtro:<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="pattern" width="20" height="10"patternUnits="userSpaceOnUse">
<path d="M0,0 L10,0 L10,5 L0,5z" fill="lightblue" stroke="none" />
<path d="M0,5 L10,5 10,10 L0,10z" fill="black" stroke="none" />
<path d="M10,0 L20,0 L20,5 L10,5z" fill="black" stroke="none" />
<path d="M10,5 L20,5 L20,10 L10,10z" fill="lightgray" stroke="none" />
</pattern>
</defs>
<rect id="pattern_image" x="0" y="0" width="100%" height="100%" fill="url(#pattern)" />
</svg>Las propiedades configurables de path son:
| Parámetros | Definición |
|---|---|
id |
El nombre de identificador que se utiliza para hacer referencia a este patrón. |
patternUnits |
Puede tomar los valoresUserSpaceOnUse o objectBoundingBox. El segundo, hace que las unidades de posicionamiento y tamaño (x, y, width y height) en formato decimal (0.00 a 1.00) o en porcentaje delimiten la zona que usa el patrón. |
patternContentUnits |
Es idéntico a patternUnits aunque, éste, no está soportado por el plugin de Adobe. |
patternTransform |
Permite que el objeto pueda ser "transformado". Para saber más puedes leer el artículo sobre este tema accediendo a Transformaciones en gráficos vectoriales SVG. |
x,y |
Son el desplazamiento desde el borde superior izquierdo del SVG. Por defecto son 0. |
width, height |
Son el ancho y alto de la baldosa patrón. |
viewBox |
El cuadro de vista son los puntos de visión en esta área del SVG. Necesita 4 valores separados por espacios en blanco o comas. (Min x, min y, ancho, alto). |
xlink: href |
Referencia a otro modelo cuyos atributos se utilizan como valores por defecto y hereda su hijos o descencientes. Puede ser recursivo. |
