SVG <feSpecularLighting>用法及代碼示例

<feSpecularLighting> SVG過濾器原語使用alpha通道作為凹凸貼圖來照亮源圖形。

用法:

<feSpecularLighting in ="" surfaceScale =""  specularConstant="" 
specularExponent="" kernelUnitLength="" >

屬性：

in:它標識給定過濾器原語的輸入。
surfaceScale:它代表濾光器基元的表麵高度。
specularConstant:它控製鏡麵照明的反射率。
specularExponent:它控製光源的焦點。
kernelUnitLength:根據使用的上下文，它有兩種含義。對於照明濾鏡基元，它指示x和y坐標的預期距離，對於<feConvolveMatrix>，它指示內核矩陣中連續列和行之間的預期距離。

範例1：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg height="200" width="200"> 
        <filter id="filter"> 
  
            <feSpecularLighting specularExponent="5"
                lighting-color="gold" result="light"> 
                  
                <fePointLight x="100" y="100" z="100" /> 
            </feSpecularLighting> 
  
            <feComposite in="SourceGraphic" 
                in2="specOut" operator="arithmetic" 
                k1="1" k2="0" k3="1" k4="0" /> 
        </filter> 
  
        <rect x="1" y="1" width="200" height="200" 
            style="stroke:#000000; fill:green;  
            filter:url(#filter);" /> 
  
        <rect x="50" y="50" width="100" height="100" 
            style="stroke:#000000; fill:green;  
            filter:url(#filter);" /> 
  
        <g fill="#FFFFFF" stroke="black" font-size="10" 
            font-family="Verdana"> 
              
            <text x="60" y="100">GeeksForGeeks</text> 
    </svg> 
</body> 
  
</html>

輸出：

範例2：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg height="200" width="200" 
        viewBox="0 0 220 220"> 
          
        <filter id="filter"> 
  
            <feSpecularLighting specularExponent="2"
                lighting-color="shadow" result="light"> 
                  
                <fePointLight x="200" y="200" z="100" /> 
            </feSpecularLighting> 
  
            <feComposite in="SourceGraphic" 
                in2="specOut" operator="arithmetic" 
                k1="0" k2="1" k3="1" k4="0" /> 
        </filter> 
  
        <rect x="40" y="40" width="200" height="200" 
            style="stroke:black; fill:green; 
            filter:url(#filter);" /> 
  
        <circle cx="130" cy="130" r="50" style= 
            "fill:black; filter:url(#filter)" /> 
    </svg> 
</body> 
  
</html>

輸出：

範例3：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg height="200" width="200" 
        viewBox="0 0 220 220"> 
          
        <filter id="filter"> 
  
            <feSpecularLighting in="BackgroundImage"
                specularConstant="0.8" surfaceScale="1"
                specularExponent="20" kernelUnitLength="1"
                lighting-color="red"> 
                  
                <fePointLight x="100" y="100" z="220" /> 
            </feSpecularLighting> 
  
            <feComposite in="SourceGraphic" in2="specOut"
                operator="arithmetic" k1="0" k2="1" 
                k3="1" k4="0" /> 
        </filter> 
  
        <rect x="40" y="40" width="100" height="100" 
            style="stroke:#000000; fill:lightgreen;  
                filter:url(#filter);" /> 
    </svg> 
</body> 
  
</html>

輸出：

相關用法

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