Atributo clip-path de CSS
Definición y uso
El atributo clip-path le permite cortar los elementos en figuras básicas o fuentes SVG.
Notas:clip-path reemplazará el atributo clip obsoleto.
Sintaxis de CSS
clip-path: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none;
Valor del atributo
| Valor | Descripción |
|---|---|
| clip-source | Defina la URL que apunta al elemento SVG <clipPath>. |
| basic-shape | Corte el elemento en forma de figura básica: círculo, elíptico, polígono o estrella. |
| margin-box | Utilice el cuadro del margen (margin box) como cuadro de referencia. |
| border-box | Utilice el cuadro del borde (border box) como cuadro de referencia. |
| padding-box | Utilice el cuadro de relleno (padding box) como cuadro de referencia. |
| content-box | Utilice el cuadro del contenido (content box) como cuadro de referencia. |
| fill-box | Utilice el cuadro del borde del objeto (object bounding box) como cuadro de referencia. |
| stroke-box | Utilice el cuadro del borde del trazo (stroke bounding box) como cuadro de referencia. |
| view-box | Utilice la cuadrícula de SVG como cuadro de referencia. |
| none | Valor predeterminado. No se crea una ruta de cortado. |
Detalles técnicos
| Valor predeterminado: | none |
|---|---|
| Herencia: | No |
| Producción de animación: | Admite (solo el valor basic-shape). Consulte:Propiedades relacionadas con la animación. |
| Versión: | Módulo de Masking de CSS Nivel 1 |
| Sintaxis de JavaScript: | object.style.clipPath="circle(50%)" |
Compatibilidad del navegador
Los números en la tabla indican la versión del navegador que admite completamente la propiedad.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 55.0 23.0 -webkit- |
79.0* | 54.0 | 9.1 6.1 -webkit- |
42.0 15.0 -webkit- |
Edge solo admite clip-path en elementos SVG (no admite elementos HTML).
