Open In App

SVG FEBlendElement.mode Property

Improve
Improve
Like Article
Like
Save
Share
Report

The SVG FEBlendElement.mode property returns the SVGAnimatedEnumeration object corresponding to the mode attribute of the FEBlendElement.mode element.

Syntax:

var a = FEBlendElement.mode

Return value: This property returns the SVGAnimatedEnumeration object corresponding to the mode attribute of the FEBlendElement.mode element.

Example 1: 

HTML




<!DOCTYPE html>
<html>
  
<body>
    <svg width="200" height="200">
        <defs>
            <filter id="spotlight">
                <feFlood result="floodFill" 
                    x="0" y="0" width="100%" 
                    height="100%" 
                    flood-color="green"
                    flood-opacity="1" />
  
                <feBlend in="FillPaint" 
                    in2="floodFill" 
                    mode="multiply" 
                    id="gfg" />
            </filter>
        </defs>
  
        <rect x="40" y="40" width="100" 
            height="100" 
            style="stroke: #000000; 
                fill: lightgreen; 
                filter: url(#spotlight);" />
  
        <rect x="40" y="40" width="100" 
            height="100" 
            style="stroke: #000000; 
                fill: green;" />
  
        <g fill="#FFFFFF" stroke="black" 
            font-size="10" 
            font-family="Verdana">
  
            <text x="50" y="90">
                GeeksForGeeks
            </text>
        </g>
    </svg>
  
    <script type="text/javascript">
        var g = document.getElementById("gfg");
        console.log(g.mode);
          
        console.log("mode attribute is :", 
                g.mode.baseVal)
    </script>
</body>
  
</html>


Output:

Example 2: 

HTML




<!DOCTYPE html>
<html>
  
<body>
    <svg width="200" height="200">
        <defs>
            <filter id="Screen">
                <feBlend mode="screen" 
                    in2="BackgroundImage" 
                    in="SourceGraphic" 
                    id="gfg" />
            </filter>
        </defs>
  
        <rect x="1" y="1" width="198" 
            height="118" 
            style="stroke: #000000; 
                fill: black; 
                filter: url(#Screen);" />
  
        <circle cx="100" cy="60" r="55" 
            stroke="black" 
            stroke-width="3" 
            fill="Lightgreen" />
  
        <g fill="#FFFFFF" stroke="Green" 
            font-size="10" 
            c font-family="Verdana">
  
            <text x="60" y="62">
                GeeksForGeeks
            </text>
  
            <script type="text/javascript">
                var g = document.getElementById("gfg");
                console.log(g.mode);
  
                console.log("mode attribute is :", 
                        g.mode.baseVal)
            </script>
        </g>
    </svg>
</body>
  
</html


Output:

Supported Browsers:

  • Google Chrome
  • Edge
  • Firefox
  • Safari
  • Opera
  • Internet Explorer


Last Updated : 30 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads