TAG
CSS
Result
Run
License
<div class="svg-wrap"> <svg class="svg1" width="100" height="100"> <defs> <mask id="m1" class="mask-circle"> <circle cx="20" cy="30" r="40" fill="red" fill-opacity="0.9" stroke="yellow" stroke-width="10" stroke-opacity="0.1" /> </mask> </defs> <rect class="rect" x="0" y="0" width="100" height="100" fill="blue" /> </svg> <label>mask-type: luminance;</label> <svg class="svg2" width="100" height="100"> <defs> <mask id="m2" class="mask-circle"> <circle cx="20" cy="30" r="40" fill="red" fill-opacity="0.9" stroke="yellow" stroke-width="10" stroke-opacity="0.1" /> </mask> </defs> <rect class="rect" x="0" y="0" width="100" height="100" fill="blue" /> </svg> <label>mask-type: alpha; </label> </div>
.svg-wrap { display: inline-grid; grid: auto / auto auto; grid-auto-flow: row; gap: 20px; justify-contents: center; } .svg-wrap > svg { border: 1px solid #CCC; } .svg-wrap > label:nth-of-type(1) { grid-row-start: 2; } .svg1 .mask-circle { mask-type: luminance; } .svg1 .rect { mask: url('#m1'); } .svg2 .mask-circle { mask-type: alpha; } .svg2 .rect { mask: url('#m2'); }
Console
expand_less
License
License
by DevDic
Close