Patrones de relleno

facebook-svg gplus-svg twitter-svg

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

Atributo Ejemplo Valores
pattern
Units
patternUnits = "userSpaceOnUse" userSpaceOnUse | objectBounding
Box
pattern
Transform
patternTransform = "rotate(-45 .5 .5)"  
fill-opacity fill-opacity = ".5" número de 0 a 1
stroke-opacity stroke-opacity = ".5" número de 0 a 1

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)" />



  
    
      
    
  
  

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

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.

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