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

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

或者更可取的是，用一条路径绘制整个东西，在那里你可以顺时针绘制矩形，逆时针绘制圆形作为切口。

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

＆＃13;

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

＆＃13;

是否可以反转SVG的剪辑？

1 个答案: