Last week I showed you some masking examples where the mask was more than a rectangle, including a couple where the mask fill was a gradient or pattern. Perhaps even more interesting, you can add a mask on top of an image or use an image or text as the mask.
Tag: masking
SVG Masking Examples — Paths, Gradients, And Patterns
More About SVG Masking — Properties And Attributes
For the last several weeks I’ve been talking about clipping and masking in SVG. Last week I covered the very basics of SVG masking and mentioned I would continue today and talk about some of the additional properties and attributes you can use for greater control of your masks.
SVG Masking
Like clipping paths, masks are used to hide and reveal parts of graphics and other elements. The difference is where clipping paths either show elements as fully opaque or fully transparent, masks allow you to control the degree of transparency or opacity. Where a clipping path leave every pixel as 0% or 100% opaque, masks can be 42% or 68% or any other percent opaque for any pixel in the mask.
CSS Clipping and Masking: Examples and Observations
On Monday I walked through the spec for css clipping and masking. Since the post grew a little long, I promised some examples for today. I’ll also offer a few observations at the end of the post.