SVG FESpecularLighting.kernelUnitLengthX屬性用法及代碼示例

SVG SpecularLighting.kernelUnitLengthX屬性返回與FESpecularLighting.kernelUnitLengthX元素的kernelUnitLengthX組件相對應的SVGAnimatedNumber對象。

用法:

var a = FESpecularLighting.kernelUnitLengthX

返回值：此屬性返回與FESpecularLighting.kernelUnitLengthX元素的kernelUnitLengthX組件相對應的SVGAnimatedNumber對象。

範例1：

<!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" id="gfg">  
                  
                <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="60" y="60" width="150" height="150"
            style="stroke:#000000; fill:lightgreen;  
                filter:url(#filter);" />  
  
        <script type="text/javascript"> 
                var g = document.getElementById("gfg"); 
                console.log(g.kernelUnitLengthX) 
                console.log("kernelUnitLengthX value is:", 
                    g.kernelUnitLengthX.baseVal) 
        </script> 
    </svg>  
</body>  
  
</html>

輸出：

範例2：

<!DOCTYPE html>  
<html>  
  
<body>  
    <svg height="200" width="200">  
        <filter id="filter">  
  
            <feSpecularLighting specularExponent="5"
                lighting-color="gold" result="light" 
                surfaceScale="5" in="SourceGraphic" 
                kernelUnitLength="3.2" 
                specularConstant="1.3" id="gfg">  
                  
                <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> 
  
        <script type="text/javascript"> 
                var g = document.getElementById("gfg"); 
                console.log(g.kernelUnitLengthX) 
                console.log("kernelUnitLengthX value is:" 
                 , g.kernelUnitLengthX.baseVal) 
        </script> 
    </svg>  
</body>  
  
</html>

輸出：

範例3：

<!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" 
                surfaceScale="6" in="BackgroundImage" 
                specularConstant="5" kernelUnitLength="5"
                id="gfg">  
                  
                <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)" />  
  
        <script type="text/javascript"> 
                var g = document.getElementById("gfg"); 
                console.log(g.kernelUnitLengthX) 
                console.log("kernelUnitLengthX value is:", 
                    g.kernelUnitLengthX.baseVal) 
        </script> 
    </svg>  
</body>  
  
</html>

輸出：

支持的瀏覽器：

穀歌瀏覽器
Edge
Firefox
Safari
Opera
IE瀏覽器

相關用法

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