#### Chapter 9

This chapter demonstrates about the SVG masks which is used to apply the masks on SVG shapes. By using the SVG shapes user can determine the visible shapes of the svg shapes following are the concepts covered in this chapter.

SVG masks is known as the more advanced versions of a clip path. SVG masks defines only visible part of the SVG. User can apply SVG mask to any basic SVG shape the code below demonstrates the basic SVG mask as shown below.

<svg>
<defs>
<rect x="0" y="0" width="100" height="50"
style="stroke:none; fill: #ffffff"/>
</defs>
<rect x="1" y="1" width="100" height="100"
</svg>


Result
By running the above code in a preferred browser then user will get the output as shown below.

The example code below demonstrate the mask for basic SVG shapes.

<svg>
<defs>
<circle cx="25" cy="25" r="25" style="stroke:none; fill: #ffffff"/>
</defs>
<rect x="1" y="1" width="100" height="100"
</svg>


Result
By running the above code in a preferred browser then user will get the output is as shown below.

<svg width="200" height="200" version="1.1" >
<defs>
<stop offset="0" stop-color="white" stop-opacity="0" />
<stop offset="1" stop-color="white" stop-opacity="1" />
<rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"  />
</defs>
<rect x="0" y="0" width="200" height="200" fill="black" />
</svg>


Result
By running the above code in a preferred browser then user will get the output as shown below.

Transparency Opacity
The snippet below demonstrates to set the transperncy for the whole element by using the opacity attribute.

<rect x="0" y="0" width="100" height="100" opacity=".5" />


In order to fill and stroke the above triangle there are two separate attributes which are the fill-opacity and stroke-opacity. If user used the stroke opacity on an element then which will shine through half of the stroke and other half the background will appear the code as shown below.

<svg width="200" height="200" version="1.1" >
<rect x="0" y="0" width="200" height="200" fill="black" />
<circle cx="100" cy="100" r="50" stroke="white" stroke-width="40" stroke-opacity=".5" fill="red" />
</svg>


Result
By running the above code in a preferred browser then user will get the output as shown below.

User can apply the gradient shape as a mask and can get the gradient transparency to the shape the code below demonstrates the gradient mask which contains the text under rectangle. User can observe the transparency get changes with the gradient of the mask as shown below.

<svg>
<defs>
x1="0%"   y1="0%"
x2="100%" y2="0%"
<stop offset="0%"   stop-color="#ffffff" stop-opacity="1"/>
<stop offset="100%" stop-color="#000000" stop-opacity="1"/>
<rect x="0" y="0"  width="200" height="100"
</defs>
<text x="10" y="55" style="stroke: none; fill: #ff0000;">
This text is under the rectangle
</text>
<rect x="1" y="1" width="200" height="100"
</svg>


Result
By running the above code in a preferred browser then user will get the output as shown below.

User can also use the fill patterns in SVG Mask and shape the mask to the fill pattern as shown in below code.

<svg>
<defs>
x1="0%"   y1="0%"
x2="100%" y2="0%"
<stop offset="0%"   stop-color="#ffffff" stop-opacity="1"/>
<stop offset="100%" stop-color="#000000" stop-opacity="1"/>
<pattern id="pattern2"
x="10" y="10" width="20" height="20"
patternUnits="userSpaceOnUse" >
<circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff; " />
</pattern>
<rect x="0" y="0"  width="200" height="100"
</defs>
<text x="10" y="55" style="stroke: none; fill: #ff0000;">
This text is under the rectangle
</text>
<rect x="1" y="1" width="200" height="100"