w3.unpo<code>todo

Patrones de relleno

Además de colores solidos y degradados, también podemos utilizar patrones ( patterns ) como relleno para los trazados SVG. Un patrón puede ser hecho de imágenes ( png, jpg, gif etc... ) o de trazados dibujados en el SVG.

Para esto utilizamos el elemento <pattern>. Exactamente como en el caso de los degradados, el elemento <pattern> tiene que ser definido dentro del elemento <defs> ( definiciones ). Los elementos que aparecen definidos dentro del elemento <defs> no aparecen en pantalla, pero pueden ser referenciados más tarde. Para esto normalmente se los asigna una identificación ( id ).

Imágenes como patrones de relleno

En el siguiente ejemplo utilizamos una imagen ( cafe.jpg ) como patrón de relleno. La imagen definida con <image> aparece dentro del elemento <pattern> que a su turno aparece definido dentro del elemento <defs>. Al elemento <pattern> le asignamos el id="imagen", para poder referenciarlo más tarde.
En el llienzo SVG dibujamos un rectángulo con <rect> que utiliza como relleno el patrón definido anteriormente.

<rect width="250" height="200" fill="url(#imagen)" />

En lugar de clipPath

Normalmente estoy utilizando clip-path para recortar una imagen con un trazado svg. Para conseguir el mismo efecto podemos utilizar patrones de relleno.

Primero necesito saber el tamaño del trazado svg. Para esto en javascript voy a utilizar el método getBBox() para conseguir la anchura y la altura del trazado y voy a utilizar el más grande de los dos como anchura de la imagen. Es importante que la imagen sea más grande que el trazado para que no queden espacios en blanco.

<image xlink:href="cafe.jpg" width="448" />

La anchura y la altura del patrón es width="1" height="1". Alternativamente podría haber utilizado porcentajes: width="100%" height="100%" Esto quiere decir que el patrón cubre todo el trazado.

<pattern id="img" width="1" height="1">
      <image xlink:href="cafe.jpg" width="448" />
  </pattern>

Finalmente puedo utilizar el patrón como valor del atributo fill del trazado #cafe.

See the Pen Imagenes como patrones de relleno en svg**** by Gabi (@enxaneta) on CodePen.

Trazados como patrones de relleno

A continuación utilizamos una elipse dibujada con <ellipse> como patrón de relleno. El elemento <elipse> va, como es debido, dentro del elemento <pattern id = "elipse">.

Los atributos x e y marcan las coordenadas del punto de donde empieza el patrón, en este caso justo en el medio del objeto que queremos rellenar ( x="50%" y="50%" ).

<pattern id="elipse2" x="50%" y="50%" width="20%" height="33.33%">

Los atributos width y height marcan la anchura y la altura del patrón, o sea: el elemento que se repite (la elipse en este caso).

<pattern id="elipse2" x="0" y="0" width="16.66%" height="33.33%">

El atributo patternUnits

El atributo patternUnits establece la escala a utilizar para definir la posición (x, y) y el tamaño (width, height) de la imagen que se repite.

El atributo patternUnits puede tomar uno de estos dos valores:
objectBoundingBox (objeto caja delimitadora) el valor por defecto. En este caso los valores de x,y width y height se calculan relativo a la caja delimitadora.
userSpaceOnUse: En este caso los valores de los atributos x,y width y height, si aparecen en porcentajes, se calculan relativo al elemento svg padre o pueden tomar valores en cualquier otro tipo de unidades para la longitud

Como pueden ver,el ejemplo anterior, tanto la anchura como la altura del patrón es en porcentajes. Por defecto estos porcentajes se calculan relativo a la caja delimitadora: en este caso el rectángulo a rellenar. Digo"por defecto" ya que los patrones en SVG tienen otro atributo muy importante: patternUnits cuyo valor predeterminado es objectBoundingBox (objeto caja delimitadora).

El otro valor que puede tomar este atributo es userSpaceOnUse, que en este caso se refiere al tamaño del lienzo SVG. O sea: si esto fuera el caso, los porcentajes se calcularían relativo al lienzo SVG. Si queremos hablar del atributo patternUnits el ejemplo anterior es irrelevante teniendo en cuenta que el tamaño del rectángulo a rellenar es igual al tamaño del lienzo SVG.

La única diferencia entre los dos patrones utilizados en el siguiente ejemplo es el valor del atributo patternUnits.

En el primer caso la anchura del elemento base del patrón id="elipse0" ( el fragmento que se repite una y otra vez ) es width="20%", y equivale a una anchura de 48:
240 * 20% = 48 (la anchura del lienzo SVG es width ="240").

<pattern id="elipse0" x="50%" y="50%"
                      width="20%" height="20%" 
                      patternUnits="userSpaceOnUse">

En el segundo caso la anchura del elemento base del patrón id="elipse1" ( el fragmento que se repite una y otra vez ) es también width="20%", pero esta vez equivale a una anchura de 24:
120 * 20% = 48 (la anchura del rectángulo a llenar es width="120")

<pattern id="elipse1" x="50%" y="50%" 
                      width="20%" height="20%" 
                      patternUnits="objectBoundingBox">

See the Pen SVG Patrones de relleno by Gabi (@enxaneta) on CodePen.

el atributo patternContentUnits

El atributo patternContentUnits establece la escala a utilizar para el contenido de la imagen que se repite.

Exactamente como el atributo patternUnits, patternContentUnits puede tomar uno de estos dos valores:
objectBoundingBox (objeto caja delimitadora). En este caso los valores de x,y width y height se calculan relativo a la caja delimitadora.
userSpaceOnUse: (el valor por defecto). En este caso los valores de los atributos x,y width y height se calculan relativo al elemento svg padre o pueden tomar valores en unidades de usuario o cualquier otro tipo de unidades para la longitud.

Por favor observe que en este caso el valor por defecto del atributo patternContentUnits es userSpaceOnUse.

See the Pen el atributo patternContentUnits by Gabi (@enxaneta) on CodePen.

Transformaciones con patternTransform

Los patrones pueden ser transformados utilizando el atributo patternTransform. El atributo patternTransform toma como valor una de las funciones de transformación conocidas: translate, rotate, scale.... En el siguiente ejemplo giramos el patrón 45° en el sentido contrario del reloj con rotate.

patternTransform="rotate(-45)

Grupo de trazados

Para definir el patrón también podemos utilizar un grupo de trazados, agrupados o no en un elemento <g>. En este caso agrupamos los trazados dentro de un elemento <g> ( group ). Más tarde podemos volver a utilizar este grupo con <use> Naturalmente, tenemos que asignar un id al grupo  ( <g id="deCuadros"> - en este caso ) para poder referenciarlo más tarde.

<use xlink:href='#deCuadros'>

See the Pen SVG patterns - de cuadros* by Gabi (@enxaneta) on CodePen.

Más ejemplos de patrones SVG