I have a basic question about canvas and SVG. I want to create an overlay with holes and fill it with some color.
It seems to work using canvas, but I want to try SVG (to handle event e.g. resize).
![canvas](https://i.stack.imgur.com/xbjks.png)

```
canvas.width  = 200;
canvas.height = 200;

var context = canvas.getContext('2d');

//fill background
context.globalAlpha = 0.8;
context.fillStyle = "blue"
context.fillRect(0, 0, 200, 200);

context.globalCompositeOperation = 'xor';
context.globalAlpha = 1.0;
context.fillStyle = "rgba(0,0,0,1)";
context.fillRect(50, 50, 50, 50);

```

<https://jsfiddle.net/gpx21/195ygzhq/>

but SVG mask looks too light.

![svg](https://i.stack.imgur.com/9i0M0.png)

```
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="
    position: absolute;
    z-index: 19000;
    top: 0;
    left: 0;
">
    <defs>
        <mask id="mask1" maskContentUnits="userSpaceOnUse">
            <rect x="0" y="0" width="200" height="200" style="opacity: 0.8; fill:blue;"></rect>
            <path d="M50 50 H100 V100 H50Z" id="hole"></path>
        </mask>
    </defs>
    <rect width="200" height="200" style="fill:blue; mix-blend-mode: darken;mask:url(#mask1);"></rect>
</svg>

```

<https://jsfiddle.net/gpx21/1fktpnr5/>

how can I archieve the same effect as in canvas? Thanks.