SVG中的遮罩？答案

【问题标题】：Masking in SVG?SVG中的遮罩？
【发布时间】：2011-08-30 00:21:05
【问题描述】：

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

【问题讨论】：

标签： html svg

【解决方案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">

【讨论】：

【解决方案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 和 defs 元素之外的最后一个圆圈。

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

【讨论】：