SVG FEMergeNode.in1屬性用法及代碼示例

SVG FEMergeNode.in1屬性返回與FEMergeNode元素的in1組件相對應的SVGAnimatedString對象。

用法:

let in_prop = FEMergeNode.in1

返回值：此屬性返回與FEMergeNode元素的in1組件相對應的SVGAnimatedString對象。

範例1：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg width="200" height="200"> 
        <filter id="feOffset" x="-40" y="-20" 
            width="100" height="200"> 
              
            <feOffset in="SourceGraphic" 
                dx="60" dy="60" /> 
  
            <feGaussianBlur stdDeviation="5" 
                result="blur2" /> 
  
            <feMerge> 
                <feMergeNode in="BackgroundImage" 
                    id="gfg" /> 
            </feMerge> 
        </filter> 
  
        <rect x="40" y="40" width="100" height="100"
            style="stroke:#000000; fill:red;  
                 filter:url(#feOffset);" /> 
  
        <rect x="40" y="40" width="100" height="100"
            style="stroke:#000000; fill:red;" /> 
  
        <script type="text/javascript"> 
            let mergeNode = document.getElementById("gfg"); 
            console.log(mergeNode.in1); 
              
            console.log("in1 value is:", 
                mergeNode.in1.baseVal); 
        </script> 
    </svg> 
</body> 
  
</html>

輸出：

範例2：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg width="200" height="200"> 
        <filter id="feOffset" x="-40" y="-20"
            width="100" height="200"> 
              
            <feOffset in="FillPaint" dx="60" 
                dy="60" /> 
  
            <feGaussianBlur in="SourceGraphic" 
                stdDeviation="5" /> 
  
            <feMerge> 
                <feMergeNode in="BackgroundImage" 
                    id="gfg" /> 
            </feMerge> 
        </filter> 
  
        <rect x="40" y="40" width="100" height="100"
            style="stroke:#000000; fill:blue;  
                 filter:url(#feOffset);" /> 
  
        <rect x="40" y="40" width="100" height="100" 
            style="stroke:#000000; fill:red;" /> 
  
        <script type="text/javascript"> 
            let mergeNode = 
                document.getElementById("gfg"); 
            console.log(mergeNode.in1); 
              
            console.log("in1 value is:", 
                mergeNode.in1.baseVal) 
        </script> 
    </svg> 
</body> 
  
</html>

輸出：

支持的瀏覽器：

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

相關用法

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