SVG FEBlendElement.in1 Property
Last Updated :
30 Mar, 2022
The SVG FEBlendElement.in1 property returns the SVGAnimatedString object corresponding to the in attribute of the FEBlendElement.in1 element.
Syntax:
var a = FEBlendElement.in1
Return value: This property returns the SVGAnimatedString object corresponding to the in attribute of the FEBlendElement.in1 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.in1);
console.log("in attribute is :",
g.in1.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.in1);
console.log("in attribute is :",
g.in1.baseVal)
</ script >
</ g >
</ svg >
</ body >
</ html >
|
Output:
Supported Browsers:
- Google Chrome
- Edge
- Firefox
- Safari
- Opera
- Internet Explorer
Share your thoughts in the comments
Please Login to comment...