Svg 过滤器获取两个模糊对象的轮廓

Question

我有两个正方形。

最终目标是获得两个合并后的 svg 对象的圆形轮廓。所以，为了实现这一点，我首先用

模糊了它们

<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />

然后，我将不透明度乘以 30 并减去 255*-9，增加对比度并合并两个形状

<feColorMatrix
  in="blur"
  type="matrix"
  values="
        1 0 0 0 0
        0 1 0 0 0 
        0 0 1 0 0  
        0 0 0 30 -9"
  result="goo"
/>

但是我想要的结果不是这样的。我想得到这个形状的轮廓。有办法吗？

Answer 1

如果您只想要大纲，请在过滤器中添加 feMorphology/dilate 和 composite/out。

（如果你想从goo中减去原始方块，那么省略feMorphology并将feComposite/out中的“goo”更改为SourceGraphic。）

<svg width="800px" height="600px" viewBox=" 0 0 400 400">
<defs>
  <filter id="outline" x="-50%" y="-50%" height="200%" width="200%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
    <feColorMatrix type="matrix"
  values="
        1 0 0 0 0
        0 1 0 0 0 
        0 0 1 0 0  
        0 0 0 30 -9" result="goo"/>
    <feMorphology operator="dilate" radius="1"/>
    <feComposite operator="out" in2="goo"/>
/>
  </filter>
  </defs>
  <g filter="url(#outline)">
  
  <rect fill="red" x="10" y="30" width="100" height="100"/>
  
    <rect fill="red" x="120" y="30" width="100" height="100"/>
  </g>
</svg>

Svg 过滤器获取两个模糊对象的轮廓

Svg filter get outline of two blurred Objects

merge

svg

filter

svg-filters