Расширять и разрушать SVG формы только штрихом (без заливки)?

Question

Я использую D3.js для рисования некоторых форм SVG.Когда фигуры накладываются друг на друга, я бы хотел либо расширить, либо разрушить родительские / дочерние фигуры, чтобы избавиться от перекрытия.

Однако эти фигуры имеют только контур обводки, без заливки.

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

Когда я устанавливаю fill="none" для фильтра разрушения, форма исчезает.Когда я делаю это для расширенного фильтра, у меня остается форма с большой шириной штриха.Я просто хочу статическую форму обводки (с прозрачной заливкой или без заливки).

Вот мой JSFiddle.https://jsfiddle.net/programmingprincess/2q3zd0o5/4/

Красная / сине-зеленая фигура слева была бы идеальной, ЕСЛИ у синей фигуры была пустая заливка и только синий контур.В JS Fiddle они используют зеленый цвет для создания «насмешливого» синего штриха.

Две фигуры справа показывают, что происходит, когда я связываюсь с обводкой и заполняю значения для зеленой фигуры.

Answer 1

Используя идею маски ksav, я немного изменил ее, нарисовав обводку внутри маски после размывания фигуры.Поскольку при использовании эрозии цвет обводки всегда черный, я добавляю дополнительный фильтр для инвертирования маски, используя feColorMatrix

<svg viewBox="0 0 612 792">
  <defs>
    <filter id="erode">
      <feMorphology operator="erode" in="SourceGraphic" radius="12" />
    </filter>
    <filter id="invert">
    <feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"/>
    </filter>
    <path id="myPath" d="M193.193,85c23.44,0.647,45.161,0.774,62,12c1.596,1.064,12,11.505,12,13
    c0,2.941,8.191,5.669,3,12c-3.088,3.767-6.01-0.758-11-1c-19.56-0.948-33.241,12.296-33,34c0.163,14.698,8.114,24.492,4,41
    c-1.408,5.649-6.571,15.857-10,21c-2.484,3.726-7.898,10.784-12,13c-4.115-11.677,2.686-27.29-6-35c-6.693-5.942-20.021-4.051-26,1
    c-13.573,11.466-11.885,41.492-7,58c-5.8,1.772-18.938,7.685-23,12c-6.752-10.805-15.333-17.333-24-26c-3.307-3.307-9.371-12-15-12
    c-16.772,0-13.963-15.741-13-28c1.283-16.324,1.727-28.24,4-42c1.276-7.72,8-16.411,8-23c0-7.416,15.945-29,23-29
    c4.507,0,17.678-8.701,24-11C164.853,90.76,178.27,88.546,193.193,85"  />
    <mask id="myMask">
      <!-- Everything under a white pixel will be visible -->
      <g filter="url(#invert)">
      <rect x="0" y="0" width="612" height="792" fill="white" />
      <use href="#myPath" stroke-width=9 stroke="#000" fill="white" filter="url(#erode)"></use>
      </g>
    </mask>
  </defs>
  <path d="M50,50 L150,150 L250,10 Z" fill="green" stroke="#00f" stroke-width=4></path>
  <rect x="0" y="0" width="612" height="792" fill="purple" mask="url(#myMask)" />
</svg>

Answer 2

Вы можете применить фильтр erode к пути в маске, а затем применить эту маску к тому же пути.

<svg viewBox="0 0 612 792">
  <defs>
    <filter id="erode">
      <feMorphology operator="erode" in="SourceGraphic" radius="12" />
    </filter>
    <path id="myPath" d="M193.193,85c23.44,0.647,45.161,0.774,62,12c1.596,1.064,12,11.505,12,13
    c0,2.941,8.191,5.669,3,12c-3.088,3.767-6.01-0.758-11-1c-19.56-0.948-33.241,12.296-33,34c0.163,14.698,8.114,24.492,4,41
    c-1.408,5.649-6.571,15.857-10,21c-2.484,3.726-7.898,10.784-12,13c-4.115-11.677,2.686-27.29-6-35c-6.693-5.942-20.021-4.051-26,1
    c-13.573,11.466-11.885,41.492-7,58c-5.8,1.772-18.938,7.685-23,12c-6.752-10.805-15.333-17.333-24-26c-3.307-3.307-9.371-12-15-12
    c-16.772,0-13.963-15.741-13-28c1.283-16.324,1.727-28.24,4-42c1.276-7.72,8-16.411,8-23c0-7.416,15.945-29,23-29
    c4.507,0,17.678-8.701,24-11C164.853,90.76,178.27,88.546,193.193,85"  />
    <mask id="myMask">
      <!-- Everything under a white pixel will be visible -->
      <rect x="0" y="0" width="612" height="792" fill="white" />
      <use href="#myPath" fill="black" filter="url(#erode)"></use>
    </mask>
  </defs>
  <path d="M50,50 L150,150 L250,10 Z" fill="green"></path>
  <use href="#myPath" fill="purple" mask="url(#myMask)"></use>
</svg>

Codepen