SVG <clipPath> Element
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
Please Login to comment...