SVG |Стереть часть другого пути - PullRequest
Новая
       16

SVG |Стереть часть другого пути

1 голос
/ 22 мая 2019

Я работаю над SVG-изображением и не могу понять, как стереть определенную часть пути.

Это текущая ситуация: https://gyazo.com/db59fcaf9f122e7e2c0bba5833db9ec5

Есть две зеленые буквы, которые перекрываются, и красная полоса, которая в основном представляет область, которую я хочу стереть, чтобы буквы не прилипали друг к другу. Он отлично работает, когда у меня установлен цвет фона, так как я могу легко перезаписать нижние контуры, но с прозрачным фоном этот метод больше не работает, так как кажется, что путь прозрачен, а не весь пиксель.

TL; DR: как сделать так, чтобы путь фактически делал пиксель прозрачным, а не только элемент пути?

1 Ответ

0 голосов
/ 22 мая 2019

Вы можете замаскировать 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>
...