Share this Page URL

Hour 9. Masking and Clipping > Summary - Pg. 104

Masking and Clipping 36: 37: 38: 39: 40: 41: </g> 42: 43: </svg> <use id="SunCloud1" xlink:href="#Cloud" x="-20" y="80" class="FillFFFFFF"/> <use id="SunCloud2" xlink:href="#Cloud" x="150" y="200" class="FillFFFFFF"/> <circle id="Sun" cx="105" cy="160" r="56" class="FillFFFF00"/> 104 Having laid the artwork over the dark background (line 42) from the previous example, you can see that the clouds do not extend past the boundaries of the clipping path. Clipping paths can prove to be quite useful when you have more information than you want to show in one particular area. By cropping your content using the shapes described within the clipPath element, you can save considerable time by not retooling your artwork to fit another shape. For instance, compare the amount of time needed to apply a clipping path to the amount of time required to plot path data (instead of circles and ellipses) so that the side edges of your clouds are straight and aligned with the rectangle's edges. In such cases, clipping paths prove their use by reducing your coding time. Summary Masking and clipping paths each provide a means of selectively revealing content. By using the mask element, you can create subtle blends between masked content and non-masked content. The clipPath element, on the other hand, provides a method of cropping content according to the definition of its enclosed path. The use of either depends solely on the effect you're trying to ac- complish; when you need to hide particular elements of your artwork, you can assess which option will serve you best. With masking and clipping fresh in your mind, you'll move into one of the most challenging and