画布和SVG之间的区别（填充效果）

Question

我有一个关于画布和SVG的基本问题。我想创建一个带有孔的覆盖层，并用某种颜色填充它。 似乎可以在画布上使用，但我想尝试SVG（以处理事件，例如调整大小）。

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/

但是SVG面罩看起来太轻了。

<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/

如何归档与画布中相同的效果？谢谢。

Answer 1

您可以将SVG蒙版视为灰度图像。在该图像为白色的情况下，被遮罩的元素可见，而在黑色图像的地方，被遮罩的元素为透明。

因此，要使用半透明的蓝色<rect>，您可以应用除黑色部分以外大部分都是浅灰色（即“几乎是白色”）的<mask>：

<defs>
    <mask id="mask1" maskContentUnits="userSpaceOnUse">
        <rect x="0" y="0" width="200" height="200" fill="lightgray"></rect>
        <path d="M50 50 H100 V100 H50Z" id="hole" fill="black"></path>
    </mask>
</defs>
<rect width="200" height="200" style="fill:blue; mask:url('#mask1');"></rect>

https://jsfiddle.net/1fktpnr5/1/

Answer 2

这是一个简单的修复。在svg文档中定义蒙版时，可以为蒙版元素填充黑色以将其隐藏，将白色填充以显示它们，或在两者之间使用不同的透明度。 （source）

在您的遮罩代码中：

<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>

您可以将fill:blue更改为fill:white，这应该可以解决。