Open In App

SVG <clipPath> Element

Improve
Improve
Like Article
Like
Save
Share
Report

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 &lt;clipPath&gt; 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


Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads