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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。