在svg中用切出的切片绘制圆圈的最佳方法是什么?这将用于覆盖另一个彩色圆圈的顶部作为一种掩蔽效果。
答案 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元素。
最后,你应该得到一个蓝色的圆圈,从中心切出一个圆孔。