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

Conclusion

Cut-out effects with the <clipPath> element and masks with the <mask> element are easy ways to add interest to graphics. Take Challenge 1 below to firm up your understanding of the <clipPath> and <mask> elements.

Challenge 1

To feel comfortable with the <clipPath> and <mask> elements, spend some time experimenting with the elements and their attributes.

1.1 Create a well-formed, valid SVG document and either create or import an image into the document.

1.2 Create an elliptical clipping path and apply it to your image.

1.3 Create a clipping path, using a different shape, a <path> element, or text.

1.4 Create another SVG document and another image (or reuse the one you just created).

1.5 Apply a gradient mask that uses opacity values to the image.

1.6 Apply a mask that uses color values to the image.

1.7 Experiment with gradients, using color values in a mask, and apply the mask to the image.



PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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