仅以笔划（无填充）膨胀和侵蚀SVG形状？

Question

我正在使用D3.js绘制一些SVG形状。 当形状重叠时，我想相应地扩大或侵蚀父/子形状以消除重叠。

但是，这些形状仅具有描边轮廓，没有填充。

有几个使用本地SVG滤镜实现此效果的示例 ，但它们都依赖于具有填充颜色的形状。

当我为腐蚀过滤器设置fill="none" ，形状消失了。 对膨胀过滤器执行此操作时，会留下笔触宽度较大的形状。 我只想要一个静态形状笔触（透明填充或不填充）。

这是我的JSFiddle。 https://jsfiddle.net/programmingprincess/2q3zd0o5/4/

如果蓝色填充为空且只有蓝色轮廓，则左侧的红色/蓝色/绿色将是完美的。 在JS小提琴中，他们使用绿色创建“模拟”蓝色笔触。

右边的两个形状显示了当我弄乱绿色的笔触和填充值时会发生什么。

Answer 1

您可以将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

Answer 2

使用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>