Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

SVG Clipping and Masking


SVG Clipping and Masking

SVG elements can be clipped and masked.

The <clipPath> element is used to clip an SVG element.

The <mask> element is used to apply a mask to an SVG element.


SVG Clipping

Clipping is when you remove a part from an element.

For clipping, we use the <clipPath> element.

Every path/element inside a <clipPath> element is inspected and evaluated. Then every part of the target that lies OUTSIDE of this area will NOT be rendered. In other words: Anything outside the path is hidden and anything inside is shown!

The <clipPath> element is usually placed in a <defs> section. 

Let's look at some examples:

In this example, we create a red circle centered at (50,50), with radius 50:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100" fill="red" />
</svg>

Now we add a <clipPath> element with a single <rect> element. This <rect> element would cover the UPPER HALF of the circle. The <rect> will NOT be drawn; Instead, its size and position will be used to determine which pixels of the circle that will be shown. Since the rectangle covers only the upper half of the circle, the lower half of the circle will vanish:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="cut-bottom">
      <rect x="0" y="0" width="200" height="50" />
    </clipPath>
  </defs>
  <circle cx="100" cy="100" r="100" fill="red" clip-path="url(#cut-bottom)" />
</svg>
Try it Yourself »


SVG Masking

For masking, we use the <mask> element.

The <mask> element is used to apply a mask to an SVG element.

A mask is referenced with the mask attribute.

Here is a simple mask example:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="mask1">
      <rect x="0" y="0" width="100" height="50" fill="white" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="100" fill="red" mask="url(#mask1)" />
  <rect x="0" y="0" width="100" height="100" fill="none" stroke="black" />
</svg>
Try it Yourself »

The example above defines a mask with id="mask1". Inside the <mask> element there is a <rect> element. This <rect> element defines the shape of the mask.

The example also defines a <rect> element which uses the mask. The mask is referenced with the mask attribute.

The red rectangle should be 100 pixels high, but only the first 50 pixels vertically are visible. This is because the mask rectangle is only 50 pixels high. The rectangle is only visible in the parts covered by the mask rectangle.

The last <rect> element is just to show the size of the rectangle without the mask.

Here is another example that uses a <circle> element to define the shape of the mask:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="mask2">
      <circle cx="50" cy="50" r="30" fill="white" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="100" fill="red" mask="url(#mask2)" />
  <rect x="0" y="0" width="100" height="100" stroke="black" fill="none"/>
</svg>
Try it Yourself »

Fill Color and Opacity

The fill color of the elements inside the <mask> element defines the opacity of the fill color of the element that refers to the mask.

In the examples above we have only used fill="white". In a mask, white is treated as an area that will be shown, and black is treated as an area to be masked.

A mask will be more opaque the closer the color is to #ffffff (white) and more transparent the closer the color is to #000000 (black):

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="mask3">
      <rect x="0" y="0" width="100" height="30" fill="#232323" />
      <rect x="0" y="30" width="100" height="40" fill="#454545" />
      <rect x="0" y="70" width="100" height="30" fill="#878787" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="100" fill="red" mask=" url(#mask3)"/>
</svg>
Try it Yourself »

Gradients in Masks

In this example the mask shape uses a gradient as a fill color:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient1">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="100%" stop-color="#000000" />
    </linearGradient>
    <mask id="mask4">
      <rect x="0" y="0" width="100" height="100" fill="url(#gradient1)" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="100" fill="red" mask=" url(#mask4)"/>
</svg>
Try it Yourself »

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.