屏蔽SVG?

时间:2011-03-14 16:41:59

标签: html svg

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

2 个答案:

答案 0 :(得分:3)

可能你最好的选择是使用一条路径(由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">

答案 1 :(得分:3)

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

在遮罩元素中,您有两个圆圈。第一个是你要剪切的大圆圈。注意填充是白色的。这意味着将填充形状。

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

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

最后,你应该得到一个蓝色的圆圈,从中心切出一个圆孔。