SVG 模糊滤镜：散景模糊（3层，已修剪）

示例

<svg width="900px" height="400px" viewBox="0 0 900 400">
   <defs>
<filter id="BokehBlur" 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"/> 
      <feComposite operator="in" in2="SourceGraphic"/>

    </filter>
   </defs>
        
   <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
   <image filter="url(#BokehBlur)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>

^{（图片来源：Daderot，来自Wikimedia Commons）}