Разница между холстом и SVG (эффект заливки)

Question

У меня есть основной вопрос о канве и SVG. Я хочу создать оверлей с отверстиями и залить его цветом. Кажется, он работает с использованием canvas, но я хочу попробовать 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/

как мне получить тот же эффект, что и в canvas? Спасибо.

Answer 1

Это простое исправление. Когда вы определяете маски в своих документах SVG, элементам маски можно дать заливку черного цвета, чтобы скрыть их, заливку белого, чтобы отобразить их, или что-то среднее между различными уровнями прозрачности. ( источник )

В вашем коде маски:

<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, и это должно исправить.

Answer 2

Вы можете рассматривать 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/