(click anywhere to close)
OPEN MENU

[SVG] Masks

category: Website | course: SVG | difficulty:
IN PRINT
QUICK CONTENTS:Intro
1. Masks

An easy way to create very complex shapes, is using clip paths and masks.

A clip path is a path which you can lay over another shape, or group of shapes, to cut off everything that is not inside the path. Essentially, it clips a graphic to a certain path.

First, define your path inside a <defs> element using:

<clipPath id=”name”> … any path you want … </clipPath>

You don’t necessarily need to put a <path> inside it; you can use any shape you want as a clip path, even text!

To apply this to a certain element, use clip-path=”url(#name)”. That’s it!

<svg>
    <defs>
        <!-- The clip path is a circle -->
        <clipPath id="clipper">
        	<circle cx="30" cy="30" r="30" fill="red" />
        </clipPath>
    </defs>
    <!-- Only the part of the rectangle within the circle is displayed -->
    <rect x="10" y="10" width="120" height="120" clip-path="url(#clipper)" />
</svg>

Masks

Masks are a more advanced version of clip paths. Instead of fully showing a shape inside it, or not showing it outside it, masks can set to what extent to display a shape. With a mask, for example, you can set a certain part of an element to be fully opaque, and another part to be slightly transparent.

First, again inside a <defs> element, define a mask using:

<mask id=”name”> … any shapes you want … </mask>

To apply the mask to a certain element, use the mask=”url(#name”) attribute.

Now, the important thing here, is that you can use the fill colours of the shapes within the mask, to set the transparency of the masked shape. If your mask is a rectangle with colour #ffffff (white), the masked shape will be fully opaque. If its fill colour is #000000 (black), the masked shape is fully transparent.

<svg>
    <defs>
        <mask id="masker">
        	<rect x="10" y="10" width="60" height="60" fill="red" />
        	<!-- Top left is fully opaque -->
        	<rect x="10" y="10" width="30" height="30" fill="white" />
        	<!-- Lower right is removed -->
        	<rect x="40" y="40" width="30" height="30" fill="black" />
        </mask>
    </defs>
    <rect x="10" y="10" width="60" height="60" mask="url(#masker)" fill="blue" />
</svg>
CONTINUE WITH THIS COURSE
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)