|
|
|
|
|
SVG Basics - Masking - The 'mask' element
|
|
Published
07/17/2006
|
SVG Viewer
|
|
|
|
|
|
Masking - The 'mask' element Masking is a combination of opacity values and clipping. Like clipping you can use shapes, text or paths to define sections of the mask. The default state of a mask is fully transparent which is the opposite of clipping plane. The graphics in a mask sets how opaque portions of the mask are. The luminosity of the color at a pixel determines how opaque the pixel will be. White is the most luminous color and black is the least luminous. Thus, the highest luminosity value, white, is opaque and the lowest, black, is transparent. This is backwards to physics (black absorbs all light) but matches how you define colors and mixing fractions of the new color with the colors below.
What is a color's luminosity? It is a value which says how "bright" a color is. If you only use grayscale colors for the mask you can just say it's the percentage of how white it is. Most graphic programs like Adobe Photoshop(tm) use this method. SVG allows any color to be used in a mask. How you turn red or blue or even grayscale colors into a luminosity isn't that easy. You have to deal with how eyes perceive colors. Blue is less luminous than green so rgb(0,255,0) is more luminous than rgb(0,0,255). SVG likely uses 30% red, 59% green and 11% blue to calculate the luminance.
Masks are fully transparent black by default. You must add objects to the mask for anything to show when you use a mask. There are no restrictions on what you can add to a mask.
Example 1. The relative luminosity of colors. (Download)
| Attribute | Explanation | | maskUnits | Set whether the clipping plane is relative the full view port or object. See: x, y, width, height. 'userSpaceOnUse' or 'objectBoundingBox' (default: 'objectBoundingBox') | | maskContentUnits | Use the second with percentages to make mask graphic positions relative the object. 'userSpaceOnUse' or 'objectBoundingBox' (default: 'userSpaceOnUse') | | x, y | The clipping plane of the mask. (default: -10%) | | width, height | The clipping plane of the mask. (default: 120%) | The 'mask' element
|
