SVG stdDeviation属性用法及代码示例

stdDeviation属性说明模糊操作的标准偏差。仅<feGaussianBlur>元素正在使用此属性。

用法:

stdDeviation = <number-optional-number>

属性值：stdDeviation属性接受上面提到和下面描述的值

number-optional-number：这是一对数字。第一个数字表示沿X轴的标准偏差值。第二值表示沿Y轴的标准偏差值。如果仅给出一个值，则将其视为沿两个轴的标准偏差。

注意：stdDeviation的默认值为0。

范例1：下面的示例说明了stdDeviation的值为1时的用法

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="-10 10 680 400" 
        xmlns="http://www.w3.org/2000/svg"> 
  
        <filter id="geek1"> 
            <feGaussianBlur stdDeviation="1" /> 
        </filter> 
  
        <polygon points="50 15, 100 100, 0 100"
            fill="green" 
            style="filter:url(#geek1);" /> 
    </svg> 
</body> 
  
</html>

输出：

范例2：下面的示例说明了stdDeviation的值为4时的用法。

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="-10 10 680 400" 
        xmlns="http://www.w3.org/2000/svg"> 
  
        <filter id="geek2"> 
            <feGaussianBlur stdDeviation="4" /> 
        </filter> 
  
        <polygon points="50 15, 100 100, 0 100"
            fill="green" 
            style="filter:url(#geek2);" /> 
    </svg> 
</body> 
  
</html>

输出：

范例3：下面的示例说明了stdDeviation的值为8时的用法

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="-10 10 680 400" 
        xmlns="http://www.w3.org/2000/svg"> 
  
        <filter id="geek3" x="-30%" y="-30%" 
            width="160%" height="160%"> 
            <feGaussianBlur stdDeviation="8" /> 
        </filter> 
  
        <polygon points="50 15, 100 100, 0 100" 
            fill="green" 
            style="filter:url(#geek3);" /> 
    </svg> 
</body> 
  
</html>

输出：

相关用法

注：本文由纯净天空筛选整理自thacker_shahid大神的英文原创作品 SVG stdDeviation Attribute。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。