是否可以反转SVG的剪辑？

Question

我在SVG元素上有一个矩形.然后我想在整个SVG区域绘制另一个矩形,除了我已绘制的矩形.

我想口罩可能是一个解决方案,但他们似乎行为就像剪裁-做逆我想要的东西.我试过这个:

<svg id="mySVG" width="600" height="250">
    <defs>
        <mask id="myMask" x="0" y="0" width="600" height="250" >
            <circle cx="25" cy="25" r="25" fill="white"/>
        </mask>
    </defs>

    <rect x="0" y="0" width="600" height="250" fill="red" mask="url(#myMask)"></rect>
</svg>

所以我追求的是这张图片的反面.

Answer 1

为整个事物绘制一个矩形然后使用黑色圆圈切出整个.

或者更可取的是,用一条路径绘制整个东西,在这条路径中,您可以顺时针绘制矩形,并将圆形逆时针绘制为切口.

这是最容易的第一个选项,因为你已经完成了那个方法.

 <svg id="mySVG" width="600" height="250">
    <defs>
        <mask id="myMask" x="0" y="0" width="600" height="250" >
            <rect width="600" height="250" fill="white"/>
            <circle cx="25" cy="25" r="25" fill="black"/>
        </mask>
    </defs>

    <rect x="0" y="0" width="600" height="250" fill="red" mask="url(#myMask)"></rect>
</svg>