SVG <clipPath> Element (original) (raw)

Last Updated : 15 Jul, 2025

The ****** 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

...

**Attributes

Below given are a few examples of the function given above.

**Example 1:

html `

<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>
    <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>

`

**Output:

SVG-clipPath-Element

**Example 2:

html `

<title>SVG clipPath Element</title>

<style>
    @keyframes star {
        from {
            r: 0
        }

        to {
            r: 500px
        }
    }

    #gfg circle {
        animation: star 25s ease;
    }
</style>

GeeksforGeeks 

    <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>

`

**Output:

SVG-clipPath-Element-2

**Browsers Supported: The following browsers are supported by this SVG element: