Full version, Basic version

Specification link: 14.4 Masking

linking-uri-02-b ← index → masking-opacity-01-b

# masking-mask-01-b
SVG Image | PNG Image
masking-mask-01-b Test to see if the masking features using the mask element and mask property are available. Test for mask support Mask with linear gradient from opacity=1 to opactity=0.5 Mask with uniform opacity of 0.5 Rectangle with uniform opacity of 0.5 SVG Text with mask containing rectangles of various opacities $Revision: 1.7 $ |

Test to see if the masking features using the mask element and mask property are available.

A red rectangle is displayed in the background to help view the result of transparency and masking.

From top to bottom, the tests are as follows.

In the top test, a linear gradient is used inside the mask to change the opacity of the rectangle from 1.0 (at the top) to 0.5 (at the bottom).

In the second test, a simple 50% opaque rectangle is used as a mask.

In the third test, no mask is used, but a rectangle is shown with 50% opacity. The second and third test should look the same.

Lastly, a string of text has a mask applied to it. The mask only covers a partial area of the text, so the text should only be half visible. Also the mask consists of 4 rectangles with various levels of opacity.

The rendered picture should match the reference image, except variations are possible in the labelling text (per CSS2 rules).

linking-uri-02-b ← index → masking-opacity-01-b