Recortar con clipPath

facebook-svg gplus-svg twitter-svg

Podemos recortar un trozo de una imagen generada en el lienzo SVG utilizando el elemento <clipPath>. El trazado que aparece dentro del elemento <clipPath> define la región de recorte.
Como siempre cuando se trata de un elemento que no aparece en pantalla, ponemos el elemento <clipPath> dentro de un elemento <defs> ( definiciones ) y le asignamos una identificación id para poder referenciarlo más tarde.

Un ejemplo básico

En el siguiente ejemplo dentro del elemento <clipPath> aparece un circulo que define la región de recorte.

<clipPath id="clipCirculo"">
       <circle cx="120" cy="125" r="70"></circle>     
</clipPath>

La imagen insertada ( <image xlink:href = "images/arboc.jpg" ) cubre prácticamente todo el lienzo SVG.
Para recortar de esta imagen solo la parte central, la del madroño, utilizamos el atributo clip-path = "url(#clipCirculo)". Lo que aparece entre paréntesis es una referencia al <clipPath id="clipCirculo"> definido anteriormente.

<image clip-path="url(#clipCirculo)" . . . . 


  
    
      
    
  
 

Varios trazados como región de recorte

Dentro del elemento <clipPath> pueden aparecer varios trazados que se suman para definir una sola región de recorte. Podemos recortar varios objetos SVG a la vez agrupándolos dentro de un elemento <g> al cual recortamos con clip-path.

See the Pen 391504e62dc1ca85914665ed657c1b8d by Gabi (@enxaneta) on CodePen.

Texto como región de recorte

También podemos utilizar texto como región de recorte. En el siguiente ejemplo dibujamos un rectángulo que ocupa todo el llienzo SVG. El relleno de este rectángulo es un degradado lineal id="deRojoAamarillo". Utilizamos TEXTO ( <clipPath id= "texto" >; ) como región de recorte.



  
    
      
      
    
    
      TEXTO
    		
  
 
TEXTO