SVG 中的遮罩？

Question

在 svg 中绘制一个圆形并切出一个切片的最佳方法是什么？这将用于覆盖在另一个彩色圆圈的顶部，作为一种遮蔽效果。

Answer 1

也许你最好的选择是使用路径（由 Inkscape 友情提供）：

<path fill="red" d="m 134.73897,236.38837 a 100,92.85714 0 1 1 44.86201,86.57396 l 54.68474,-77.743 z">

Answer 2

    <svg version="1.1" viewBox="0 0 100 100">
        <defs>
            <mask id="mask" x="0" y="0" width="100" height="100" maskUnits="userSpaceOnUse">
                <circle cx="50" cy="50" r="50" fill="white"/>
                <circle cx="50" cy="50" r="25" fill="black"/>
            </mask>
        </defs>
        <circle cx="50" cy="50" r="50" fill="blue" mask="url(#mask)"/>
    </svg>

在 mask 元素中，有两个圆圈。第一个是您要剪切的大圆圈。注意填充是白色的。这意味着该形状将被填充。

下一个圆较小，将从第一个圆中切掉。注意填充是黑色的。这意味着该形状不会被填充，而是保持透明。

现在这些圆圈只是定义要使用的蒙版，我们仍然需要绘制一个形状来使用蒙版。这是 mask 和 defs 元素之外的最后一个圆圈。

最后，你应该得到一个蓝色圆圈，中间有一个圆孔。