Question

我从设计师那里得到了一个图标，可以添加到我们的自定义图标字体中。图标应为带有用户切口的圆圈。不幸的是，设计人员没有遵循一些字体自定义准则，例如不透明且仅使用一种颜色。用户切口是黑色圆圈上的白色。现在，我尝试使用遮罩将用户从圈子中删除。这是我尝试过的：

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <mask id="hole">
        <circle cx="12" cy="9" r="3" stroke="black"/>
        <path d="M17 17C17 14.2386 14.7614 12 12 12C9.23858 12 7 14.2386 7 17" stroke="black"/>
    </mask>
    <circle cx="12" cy="12" r="12" fill="black" mask="url(#hole)"/>
</svg>

现在，整个圆圈消失了。我试着用填充而不是中风来玩，这没有用。我还尝试将笔触更改为白色，但这只是使用户图标位于圆圈内（是完整用户）的一部分。

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <mask id="hole">
        <circle cx="12" cy="9" r="3" stroke="white"/>
        <path d="M17 17C17 14.2386 14.7614 12 12 12C9.23858 12 7 14.2386 7 17" stroke="white"/>
    </mask>
    <circle cx="12" cy="12" r="12" fill="black" mask="url(#hole)"/>
</svg>

如何让我的用户被圈出？我不明白为什么面具不起作用。

Answer 1

在蒙版中，白色表示不透明（实心），黑色表示透明（孔）。

因此，如果要制作形状切掉的蒙版，则蒙版的背景必须为白色，孔部分应为黑色。

赞：

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <mask id="hole">
        <rect width="100%" height="100%" fill="white"/>
        <circle cx="12" cy="9" r="3" stroke="black"/>
        <path d="M17 17C17 14.2386 14.7614 12 12 12C9.23858 12 7 14.2386 7 17" stroke="black"/>
    </mask>
    <circle cx="12" cy="12" r="12" fill="black" mask="url(#hole)"/>
</svg>

使用遮罩在SVG中将用户形状切出圆形

1 个答案: