Utilizar clipPath en CSS
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: 25px 0;
background-image: url(castell.jpg);
background-size: cover;
height: 50vh;
clip-path: url(#clip);
}Por favor vea este ejemplo en codepen:
See the Pen Cabecera con clip-path by Gabi (@enxaneta) on CodePen.
En el caso en el cual el trazado para el <clipPath> es un trazado complejo con un valor del atributo d muy largo cuya caja delimitadora no es 1x1 podemos redimensionar el trazado utilizando transform="scale()".
Para saber los valores para scale necesitamos saber el tamaño de la caja delimitadora del trazado.
//el trazado de recorte
let elPath = document.querySelector("#clip path");
//la caja delimitadora del trazado de recorte
let bb = elPath.getBBox();
//establecer el valor del atributo transform del trazado para transformarlo en un elemento de una caja delimitadora de 1x1
elPath.setAttributeNS(null,"transform", `scale(${1/bb.width},${1/bb.height})`)Vea este ejemplo
See the Pen Cabecera con clip-path y trazado transformado*** by Gabi (@enxaneta) on CodePen.
No olvide consultar el soporte en los navegadores de clip-path en CSS