Question

我正在处理SVG图像，但无法弄清楚如何擦除路径的特定部分。

这是当前情况：https://gyazo.com/db59fcaf9f122e7e2c0bba5833db9ec5

有两个重叠的绿色字母和一个红色的长条，基本上代表了我要擦除的区域，因此这些字母不会彼此直接粘在一起。当我设置了背景颜色时，它可以很好地工作，因为我可以轻松覆盖较低的路径，但是在透明背景下，此方法不再起作用，因为它看起来使路径透明，而不是整个像素本身。

TL; DR：如何使路径实际渲染像素透明，而不仅仅是路径元素？

Answer 1

您可以用白色矩形遮盖J，并用额外的笔划遮盖黑色N。接下来，再次使用N。请使用遮罩<use>

的笔划宽度进行播放

svg{border:1px solid; width:90vh}

text{font-family:arial;dominant-baseline:middle}

<svg viewBox="0 0 24 24">
  <defs>
    <text id="n" x="7" y="14"  >N</text>
  
   <mask id="mascara">
    <rect width="24" height="24" fill="white"  />
    <use xlink:href="#n" fill="black" stroke="black" />
    </mask>
   </defs>
  <text x="5" y="10" style="mask: url(#mascara)">J</text>
  <use xlink:href="#n" fill="black"  />
</svg>

SVG |删除另一条路径的一部分

1 个答案: