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.
clipPath 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 >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 >
|
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 >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 >
|
Output:
Browsers Supported: The following browsers are supported by this SVG element:
- Chrome
- Edge
- Firefox
- Internet Explorer
- Safari
- Opera