滤镜高斯模糊的边界或边框问题的解决和优化

1. 所谓 “高斯模糊的边界问题” 介绍

相信有很多刚刚接触SVG滤镜模糊的新人们都可能遇到过这种问题：
1. 当模糊偏量很小的时候：

<svg width="100%" height="100%" viewBox="0 0 150 360"
     preserveAspectRatio="xMidYMid meet"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
     <filter id="filter1">
        
        <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="Gau1"/>
     filter>
     <circle cx="40" cy="40" r="10" fill="blue" filter="url(#filter1)">circle>
svg>

这是我们期望的并且没有什么问题：

1. 当偏量略大时(对于半径为10时，2偏量的模糊已经出现了问题)：

<svg width="100%" height="100%" viewBox="0 0 150 360"
     preserveAspectRatio="xMidYMid meet"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <filter id="filter1">
        
        <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="Gau1"/>
    filter>
        <circle cx="40" cy="40" r="10" fill="blue" filter="url(#filter1)">circle>
svg>

高斯模糊的偏量为2时已经出现问题了：

<svg width="100%" height="100%" viewBox="0 0 150 360"
     preserveAspectRatio="xMidYMid meet"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <filter id="filter1">
        
        <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="Gau1"/>
    filter>
        <circle cx="40" cy="40" r="10" fill="blue" filter="url(#filter1)">circle>
svg>

高斯模糊偏量为3问题更明显

2. 问题的初步解决方案

关键标签：< feComposite> 一个神奇的标签，可以将两张图源通过像素点颜色的算术运算而产生不同效果(效果展示可以看我之前的《SVG_filter滤镜标签详解2》)。我们以[stdDeviation=”3”]的边界问题例子开始。

1.步骤一：

<svg width="100%" height="100%" viewBox="0 0 150 360"
     preserveAspectRatio="xMidYMid meet"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <filter id="filter1">
        <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="Gau1"/>
        
        <feComposite in="Gau1" in2="Gau1" result="Com1" operator="in"/>
    filter>
        <circle cx="40" cy="40" r="10" fill="blue" filter="url(#filter1)">circle>
svg>

当前效果图如下：

可见虽然边界被优化了，但仍然不够，所以我们再来一次：

<svg width="100%" height="100%" viewBox="0 0 150 360"
     preserveAspectRatio="xMidYMid meet"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <filter id="filter1">
        <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="Gau1"/>
        <feComposite in="Gau1" in2="Gau1" result="Com1" operator="in"/>
        
        <feComposite in="Com1" in2="Gau1"  operator="in"/>
    filter>
        <circle cx="40" cy="40" r="10" fill="blue" filter="url(#filter1)">circle>
svg>

此时的边界问题已经完全看不出来了

通过同时增大< circle>的半径和高斯模糊的偏量，可以在可视圆半径相同的情况下，增加模糊程度，新人们可以试一下哦=0=。