El elemento SVG <clipPath> se utiliza para definir un trazado de recorte que utilizará la propiedad clip-path. Funciona igual que clip-path en CSS.
clipPath se usa para poner alguna restricción en una región, de modo que todo lo que se dibuje fuera de esa región no será visible ni se dibujará.
Sintaxis:
<clipPath></clipPath>
Atributos:
- clipPathUnits: este atributo define el sistema de coordenadas para el <clipPath> contenido del elemento.
A continuación se dan algunos ejemplos de la función dada anteriormente.
Ejemplo 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
property="viewport"
content="width=device-width,
initial-scale=1.0"
/>
<title>GeeksforGeeks</title>
</head>
<style>
@keyframes animation1 {
from {
width: 4px;
height: 4px;
}
to {
width: 150px;
height: 150px;
}
}
rect {
animation: animation1 10s ease-in-out;
}
</style>
<body>
<div style="width: 300px; height: 300px;">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>
SVG | <clipPath> element
</h2>
</center>
<svg width="500"
height="500"
transform="translate(100, 0)">
<clipPath id="gfg">
<rect width="4"
height="4"></rect>
</clipPath>
<path id="path"
d="M10, 30 A20, 20, 0, 0,
1, 50, 30 A20, 20, 0, 0, 1,
90, 30 Q90, 60, 50, 90 Q10,
60, 10, 30 Z" />
<use fill="green"
clip-path="url(#gfg)"
href="#path" />
</svg>
</div>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
property="viewport"
content="width=device-width,
initial-scale=1.0"/>
<title>GeeksforGeeks</title>
</head>
<style>
@keyframes star {from {r: 0} to {r: 500px}}
#gfg circle {
animation: star 25s ease;
}
</style>
<body>
<div style="width:300px; height:300px;">
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>
<a> Tag SVG
</h2>
</center>
<svg width="500" height="500"
transform="translate(60, -40)">
<clipPath id="gfg">
<circle>
</clipPath>
<path id="star" d="
M 85.000 105.000
L 105.000 119.641
L 102.321 95.000
L 125.000 85.000
L 102.321 75.000
L 105.000 50.359
L 85.000 65.000
L 65.000 50.359
L 67.679 75.000
L 45.000 85.000
L 67.679 95.000
L 65.000 119.641
z
"/>
<use clip-path="url(#gfg)"
href="#star" fill="red" />
</svg>
</div>
</body>
</html>
Producción:
Navegadores compatibles: los siguientes navegadores son compatibles con este elemento SVG:
- Cromo
- Borde
- Firefox
- explorador de Internet
- Safari
- Ópera