• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Masking

Whereas clipping paths create hard-edged, cut-out shapes, a mask applied to an object creates the effect of fading the object's edges into the background or seeing the object through a gauzy curtain. Whereas a clipping path uses only the boundaries of a shape to create a cut-out, a mask uses alpha and color values to composite an object into the background. Masks, like <clipPaths>, are container elements that can contain either graphic elements or other container elements. Each masked pixel value can range from fully transparent to fully opaque.

A mask is created by defining a <mask> element in much the same way that a <clipPath> element is defined. The <mask> element is then named with an id attribute so that it can be referenced by objects within the SVG document. Within the <mask> element, you define the shape to use as a mask; then you reference that mask with a mask property in the object you want to apply the mask to.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint