如何通过避免多余的 SVG 元素来应用 SVG 过滤器 feGaussianBlur？答案

【问题标题】：How to apply the SVG filter feGaussianBlur by avoiding redundand SVG elements?如何通过避免多余的 SVG 元素来应用 SVG 过滤器 feGaussianBlur？
【发布时间】：2019-08-18 09:50:37
【问题描述】：

我正在使用 SVG 过滤器

feGaussianBlur

在我的应用程序中。通过测试几种配置，我最喜欢添加相同的 SVG 形状并对其应用过滤器的效果。

是否有一种简单的方法可以通过将过滤器（使用某些参数）应用于目标 SVG 形状（以避免创建多余的 SVG 元素）来实现相同的结果？

例如请参阅下面的示例。我最喜欢第三圈。但是，它是通过在彼此顶部添加多个圆圈来创建的。

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur -->

<svg width="400" height="120"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  
  <rect width="430" height="120"></rect>

  <filter id="blurMe">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    
  </filter>

  <circle cx="60"  cy="60" r="50" fill="green" />

  <circle cx="170" cy="60" r="50" fill="green"
          filter="url(#blurMe)" />
  
  <circle cx="280" cy="60" r="50" fill="green" filter="url(#blurMe)" />
  <circle cx="280" cy="60" r="50" fill="green" filter="url(#blurMe)" />
  <circle cx="280" cy="60" r="50" fill="green" filter="url(#blurMe)" />
  <circle cx="280" cy="60" r="50" fill="green" filter="url(#blurMe)" />
  <circle cx="280" cy="60" r="50" fill="green" filter="url(#blurMe)" />
</svg>

【问题讨论】：

标签： svg svg-filters

【解决方案1】：

您可以使用 feColorMatrix 调整模糊的透明度。第 4 行第 4 列值是原始 alpha 值的乘数。看起来 1.5 倍适合您的效果。

您可以使用其他图元对模糊进行额外的操作。这是我编写的一个工具，它输出过滤器文本，让您了解可以做的一些事情：

https://codepen.io/mullany/details/sJopz

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur -->

<svg width="400px" height="120px"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 color-interpolation-filters="sRGB">
  
<defs>

  <filter id="blurMe">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>

  <filter id="blurAndMultiplyAlpha">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    <feColorMatrix type="matrix" values="1 0 0 0 0 
                                         0 1 0 0 0 
                                         0 0 1 0 0 
                                         0 0 0 1.5 0"/>
  </filter>

 </defs>

  <rect width="430" height="120"/>

  <circle cx="60"  cy="60" r="50" fill="green" />

  <circle cx="170" cy="60" r="50" fill="green"
          filter="url(#blurMe)" />
  
  <circle cx="280" cy="60" r="50" fill="green" filter="url(#blurAndMultiplyAlpha)" />

</svg>

【讨论】：

谢谢！这是一个很棒且很有帮助的答案！