Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <head> <style> .redsquare { height: 100px; width: 100px; background-color: red; border: solid 1px black; mask: url("#mask1"); } .redsquare2 { height: 100px; width: 100px; background-color: red; border: solid 1px black; mask: url("#mask2"); } </style> </head> <body> <h1>The mask-type Property</h1> <h3>Let the SVG mask element be treated as an alpha mask:</h3> <div class="redsquare"></div> <h3>Let the SVG mask element be treated as a luminance mask:</h3> <div class="redsquare2"></div> <svg width="200" height="120" xmlns="http://www.w3.org/2000/svg"> <defs> <mask id="mask1" maskContentUnits="objectBoundingBox" style="mask-type:alpha"> <rect width="10" height="10" fill="red" fill-opacity="0.7" /> </mask> <mask id="mask2" maskContentUnits="objectBoundingBox" style="mask-type:luminance"> <rect width="10" height="10" fill="red" fill-opacity="0.7" /> </mask> </defs> </svg> </body> </html>
