SVG numOctaves屬性用法及代碼示例

numOctaves屬性為<feTurbulence>原語的噪聲函數定義八度的數量。僅<feTurbulence>元素正在使用此屬性。

用法:

numOctaves = "integer"

屬性值：numOctaves屬性接受上麵提到和下麵描述的值

integer:此值顯示八度的數量。

範例1：下麵的示例說明numOctaves屬性的用法。

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg width="200" height="200" 
        viewBox="0 0 220 220" 
        xmlns="http://www.w3.org/2000/svg"> 
          
        <filter id="geek1"> 
            <feTurbulence baseFrequency="0.05" 
                numOctaves="1" result="turbulence" /> 
            <feDisplacementMap in2="turbulence" 
                in="SourceGraphic" scale="50" 
                xChannelSelector="R"
                yChannelSelector="G" /> 
        </filter> 
  
        <circle cx="100" cy="100" r="100" 
            fill="green" style="filter:url(#geek1)" /> 
    </svg> 
</body> 
  
</html>

輸出：

範例2：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <div style="color:green;  
            margin-left:50px;"> 
        <h1>GeeksforGeeks</h1> 
  
        <svg viewBox="0 0 480 100" 
            xmlns="http://www.w3.org/2000/svg"> 
  
            <filter id="geek2" x="-20%" 
                y="-20%" width="150%" 
                height="150%"> 
  
                <feTurbulence type="turbulence" 
                    baseFrequency="0.05" 
                    numOctaves="5" 
                    result="turbulence" /> 
  
                <feDisplacementMap in2="turbulence" 
                    in="SourceGraphic" scale="20" /> 
            </filter> 
  
            <polygon points= 
                "50, 9 60.5, 39.5 92.7, 40.1 67, 
                59.5 76.4, 90.3 50, 71.9 23.6, 
                90.3 32.9, 59.5 7.2, 40.1 39.4, 39.5"  
                style="filter:url(#geek2);"
                fill="hsl(106, 80%, 50%)" /> 
        </svg> 
    </div> 
</body> 
  
</html>

相關用法

注：本文由純淨天空篩選整理自thacker_shahid大神的英文原創作品 SVG numOctaves Attribute。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。