Question

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

但是，这些形状只有笔触轮廓，没有填充。

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

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

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

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

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

Answer 1

您可以将mvn clean install [ERRROR] Failed to execute on project B: Could not resolve dependencies for B.jar:1.0.0: Could not find artifact B:bundle:1.0.0 in <artifactory_url>过滤器应用于遮罩内的路径，然后将该遮罩应用于同一路径。

erode

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>

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

2 个答案: