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

Question

我正在处理 SVG 图像，但我不知道如何擦除路径的特定部分。

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

有两个重叠的绿色字母和一个基本上代表我要擦除的区域的红色条，因此字母不会直接粘在一起。当我设置了背景颜色时它工作正常，因为我可以轻松覆盖较低的路径，但是对于透明背景，此方法不再有效，因为它似乎使路径透明，而不是整个像素本身。

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

Answer 1

您可以用白色矩形和带有额外笔画的黑色 N 来遮盖 J。接下来您再次使用 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 |擦除另一条路径的一部分

SVG | Erase part of another path

svg

transparency

path