我可以使用 SVG 滤镜或 CSS 滤镜制作散景模糊吗？答案

【问题标题】：Can I make a bokeh blur with SVG filters or CSS filters?我可以使用 SVG 滤镜或 CSS 滤镜制作散景模糊吗？
【发布时间】：2016-10-04 13:51:47
【问题描述】：

https://en.wikipedia.org/wiki/File:Faux-bokeh-comparison.jpg

很容易区分我使用的是什么过滤器。我不想使用高斯模糊。

【问题讨论】：

也许带有剪辑路径和模糊。

标签： css html svg-filters css-filters

【解决方案1】：

是的，可以创建散景滤镜，但通常您必须使用剪辑路径来选择前景。这是一个带有粗略剪辑路径的三层散景滤镜的示例，只是为了向您展示如何做到这一点。正如您所看到的，过滤器非常复杂（并且性能密集），您最好在 PhotoShop 中而不是在运行时执行它。

<svg width="1800px" height="800px">
  <defs>
<clipPath id="foreground">
  <polyline points="0,240 20,260 40,300 40,360 20,380 30,420 60,450 175,500 200,600, 0,600, 0,220" fill="black"/>
  </clipPath>

<filter id="bokeh" x="0%" y="0%" width="90%" height="100%" color-interpolation-filters="sRGB">
  <feGaussianBlur stdDeviation="2" result="blurSource"/>
  <feColorMatrix type="luminanceToAlpha"/>
  <feComponentTransfer result="brightness-mask" >
    <feFuncA type="discrete" tableValues="0 0 0 1 1"/>
    </feComponentTransfer>

  
 <!--bokeh Layer 1 -->
 <feTurbulence type="fractalNoise" seed="1" baseFrequency=".67" numOctaves="3"/>
<feColorMatrix type="luminanceToAlpha"/>
  <feComponentTransfer>
    <feFuncA type="discrete" tableValues="0 0 0 1"/>
 </feComponentTransfer>
  <feComposite operator="in" in="brightness-mask"/>
  <feComposite operator="in" in="blurSource"/>

  <feMorphology operator="dilate" radius="5"/>
  <feGaussianBlur stdDeviation="8"/>
  <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0 
                                       0 0 0 9 0" /> 
  <feComponentTransfer result="bokeh1">
    <feFuncA type="linear" slope=".5" />
 </feComponentTransfer>  
  
  
  
  <!--bokeh Layer 2 -->
 <feTurbulence type="fractalNoise" seed="49" baseFrequency=".67" numOctaves="3"/>
<feColorMatrix type="luminanceToAlpha"/>
  <feComponentTransfer>
    <feFuncA type="discrete" tableValues="0 0 0 1"/>
 </feComponentTransfer>
  <feComposite operator="in" in="brightness-mask"/>
  <feComposite operator="in" in="blurSource"/>

  <feMorphology operator="dilate" radius="10"/>
  <feGaussianBlur stdDeviation="12"/>
  <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0 
                                       0 0 0 15 0" /> 
  <feComponentTransfer result="bokeh2">
    <feFuncA type="linear" slope=".3" />
 </feComponentTransfer>  
  
<!--bokeh Layer 3 -->
  
<feTurbulence type="fractalNoise" seed="44" baseFrequency=".67" numOctaves="3"/>
<feColorMatrix type="luminanceToAlpha"/>
  <feComponentTransfer>
    <feFuncA type="discrete" tableValues="0 0 0 1"/>
 </feComponentTransfer>
  <feComposite operator="in" in="brightness-mask"/>
  <feComposite operator="in" in="blurSource"/>

  <feMorphology operator="dilate" radius="10"/>
  <feGaussianBlur stdDeviation="18"/>
  <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0 
                                       0 0 0 15 0" /> 
  <feComponentTransfer result="bokeh3">
    <feFuncA type="linear" slope=".2" />
 </feComponentTransfer>  
  
<!--Merge -->
 <feBlend mode="multiply" in="bokeh3" in2="bokeh2"/>
 <feBlend mode="lighten" in2="bokeh1"/>
  
  <feMorphology operator="erode" radius="0" result="bokeh"/>   
  <feGaussianBlur stdDeviation="9" in="SourceGraphic"/>
  <feComposite operator="over" in="bokeh"/> 

</filter>
  </defs>

    <image filter="url(#bokeh)"  width="400px" height="600px" preserveAspectRatio="xMinYMin slice" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/ac/Faux-bokeh-comparison.jpg"/>
     <image clip-path="url(#foreground)"  width="400px" height="600px" preserveAspectRatio="xMinYMin slice" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/ac/Faux-bokeh-comparison.jpg"/>
       <image x="400"  width="360px" height="600px" preserveAspectRatio="xMinYMin slice" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/ac/Faux-bokeh-comparison.jpg"/>
  
  <text x="100" y="630">Bokeh Filter</text>
<<text x="550" y="630">Original</text>
  
</svg>

【讨论】：

抱歉回复晚了。我研究你的代码很久了。非常感谢。真是太神奇了。但是，我不认为这实际上是散景模糊。一些光源可能与您的过滤器结合使用。很奇怪。
谢谢你。我可以问个问题吗？您是如何编写这些过滤器的？你有什么工具吗？我还没有找到，如果没有，我想贡献一份。
希望看到你在这方面的改进——这绝对是一个初步的努力。过滤器没有好的工具 - （Inkscape 有一个，但不是很好。）我编写了自己的工具来处理阴影和一个用于文本效果的工具 - 你可以在我的 codepen 上找到它们。 codepen.io/mullany/pens/public。但是没有通用工具。