隐藏透明度的部分形状？

有没有一种方法可以隐藏SVG中绘制的部分内容，而不用其他形状绘制它？隐藏透明度的部分形状？

例如，我试图创建一个空白的圆圈，其中一个部分被切掉。我能够实现我想要的外观，但图像在我想隐藏的切片上不透明。如果我改变了页面的背景颜色，我也必须改变矩形的颜色。

我已经看过SVG剪辑，但它看起来像是隐藏什么是区域之外，而我正在寻找做相反的。我是否以这种错误的方式去做？

<svg width="60" height="60"> 
 
    <circle cx="30" cy="30" r="20" stroke-width="8" style="fill:none;stroke:#000;" /> 
 
    <rect height="8" width="22" y="26" fill="lightblue"/> 
 
</svg>

来源

2016-09-24 spencer.sm

什么布尔运算？绘制你的圆圈，绘制矩形，然后从圆圈中减去矩形。 – enhzflep

你能指出我正确的方向来学习如何做到这一点吗？ –

那么，使用Inkscape，我会做以下。（0）绘制48px圈（1）绘制一个32px圈。选择较大的一个，然后从中减去较小的一个。这会给你一条黑色的路径（看起来像一个相当粗的笔画的圆圈）。（2）绘制矩形（3）选择圆形并从中减去矩形。 – enhzflep

我一直在寻找的是一个SVG mask。

我不得不创建上由两个部分组成的圆形遮罩：

白色矩形涵盖整个图像（白：展）
什么，我希望有一个黑色的矩形以隐藏（黑色：隐藏）

代码如下所示。

<svg width="60" height="60"> 
 
    <defs> 
 
    <mask id="slice"> 
 
     <rect width="100%" height="100%" fill="white"/> 
 
     <rect height="8" width="22" y="26" fill="black"/> 
 
    </mask> 
 
    </defs> 
 
    <circle cx="30" cy="30" r="20" stroke-width="8" style="fill:none;stroke:#000;" mask="url(#slice)"/> 
 
</svg>

来源

2016-09-24 19:17:40

看起来像一个简短，简洁的解决方案。更好的是，你可以从中得到自己。（我可能会补充，比我提供的要好得多）布拉沃！ – enhzflep

可能是你想使用arc？

<svg width="12cm" height="5.25cm" viewBox="0 0 1200 400" 
 
xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 
    
 
    
 
<path xmlns="http://www.w3.org/2000/svg" d="M 225,225 a150,150 0 1,1 0,100" fill="none" stroke="red" stroke-width="25"/> 
 
</svg>

来源

2016-09-24 19:18:19

隐藏透明度的部分形状？

回答

相关问题