The <clipPath> SVG element is used to define a clipping path that is to be used by the clip-path property. It works the same as clip-path in CSS. The clipPath element is used to put some restriction on a region such that anything drawn outside that region will neither be visible nor be drawn.
Syntax
<clipPath> ... </clipPath>Attributes
- clipPathUnits: This attribute defines the coordinate system for the <clipPath> element's content.
Below given are a few examples of the function given above.
Example 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta property="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>SVG clipPath Element</title>
<style>
@keyframes animation1 {
from {
width: 4px;
height: 4px;
}
to {
width: 150px;
height: 150px;
}
}
rect {
animation: animation1 10s ease-in-out;
}
</style>
</head>
<body>
<div style="width: 300px; height: 300px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>
SVG clipPath Element
</h2>
<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>
Output:
Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta property="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>SVG clipPath Element</title>
<style>
@keyframes star {
from {
r: 0
}
to {
r: 500px
}
}
#gfg circle {
animation: star 25s ease;
}
</style>
</head>
<body>
<div style="width:300px; height:300px;">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>SVG clipPath Element</h2>
<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>
Output:
Browsers Supported: The following browsers are supported by this SVG element:
- Chrome 1
- Edge 12
- Firefox 1.5
- Opera 9
- Safari 3