Utilizar clipPath en CSS

facebook-svg gplus-svg twitter-svg

userSpaceOnUse y objectBoundingBox

El elemento SVG <clipPath> tiene un atributo especifico, un atributo utilizado solo con <clipPath>: clipPathUnits. El atributo clipPathUnits puede tomar uno de estos dos valores: objectBoundingBox o userSpaceOnUse.

De hecho en SVG hay más atributos que pueden tomar estos dos valores: gradientUnits para gradientes, filterUnits para filtros, patternContentUnits para patrones, maskUnits para mascaras SVG,  y clipPathUnits para el elemento <clipPath>.

El valor por defecto es siempre userSpaceOnUse.

userSpaceOnUse:
El sistema de coordenadas de referencia para userSpaceOnUse es el sistema de coordenadas utilizado para dibujar el objeto. Este sistema de coordenadas podría ser definido por el valor del atributo viewBox del elemento SVG o del elemento <symbol>, <marker>, <pattern> o <view> que alberga el objeto.

objectBoundingBox:
El sistema de coordenadas de referencia para objectBoundingBox es un cuadrado de 1x1 con el origen en la esquina superior izquierda, y este cuadrado es redimensionado para llenar la caja delimitadora del trazado svg.
Conque el sistema de coordenadas de referencia para objectBoundingBox es un cuadrado de 1x1, pero la caja delimitadora del trazado svg es un rectángulo que puede tener cualquier tamaño. Esto quiere decir que el cuadrado de 1x1 será redimensionado de manera diferente a lo largo del eje x e y, y la imagen será estirada o comprimida según el caso.

Utilizar clipPath en CSS ( crear una cabecera curvada )

En el siguiente ejemplo voy a utilizar un elemento <clipPath> cuyo clipPathUnits = "objectBoundingBox".
En este caso el sistema de coordenadas de referencia para objectBoundingBox es un cuadrado de 1x1.

Por favor observe los valores utilizadas para definir el trazado: d="M0,0 L0,1 A.6,.6 0 0 1 1,1 L1,0 0,0". En este caso los valores para las coordenadas varían entre 0 y 1.  Es cómo si 1 representara el 100%, y 0.6 representara el 60%. Es posible utilizar valores más grandes que 1. Por ejemplo podría utilizar 1.2, que sería el equivalente de 120%.


<svg height="0" width="0" class="svg-clip" style="position:absolute">
        <defs>
             <clipPath id="clip" clipPathUnits="objectBoundingBox">
               <path d="M0,0 L0,1 A.6,.6 0 0 1 1,1 L1,0 0,0" />
            </clipPath>
        </defs>
</svg>

Ahora puedo utilizar este elemento <clipPath> para recortar la .cabecera.


#cabecera {
  padding: 0;
  background-image: url(castell.jpg);
  background-size: cover;
  height: 50vh;
  -webkit-clip-path: url(#clip);
  clip-path: url(#clip);  
}

}

Por favor vea este ejemplo en codepen:

See the Pen Cabecera con clip-path by Gabi (@enxaneta) on CodePen.

No olvide consultar el soporte en los navegadores de clip-path en CSS