SVG <feFuncG> Element
Last Updated :
17 Aug, 2022
SVG stands for Scalable Vector Graphic. The SVG element path is used to define a path that starts from a position and ends at a particular position. SVG path can be used to create any basic shapes.
SVG <feFuncG> element: These elements are typically children of the feComponentTransfer element and specify the transfer functions of the green component of the input graphic of its parent <feComponentTransfer> element.
Syntax:
<feComponentTransfer>
<feFuncG type="" tableValues=""/>
</feComponentTransfer>
Attributes: It does not have any specified attribute but it accepts Global attributes.
Example 1:The following code demonstrates the <feFuncG> element with type “table”.
HTML
<!DOCTYPE html>
< html >
< head >
< title >SVG feFuncG Element</ title >
</ head >
< body >
< svg width = "640" height = "550"
viewBox = "0 0 640 550" >
< defs >
< filter id = "new"
filterUnits = "objectBoundingBox"
x = "0%" y = "0%" width = "100%"
height = "100%" >
< feComponentTransfer >
< feFuncG type = "table"
tableValues = "1 1 0 0" />
</ feComponentTransfer >
</ filter >
</ defs >
< image x = "10" y = "10" width = "280"
height = "350" preserveAspectRatio = "true"
xlink:href =
< image x = "310" y = "10" width = "280"
height = "350" preserveAspectRatio = "true"
filter = "url(#new)"
xlink:href =
</ svg >
</ body >
</ html >
|
Output:
Example 2: The following code demonstrates the <feFuncG> element with type “discrete”.
HTML
<!DOCTYPE html>
< html >
< head >
< title >SVG feFuncG Element</ title >
</ head >
< body >
< svg width = "640" height = "550"
viewBox = "0 0 640 550" >
< defs >
< filter id = "new"
filterUnits = "objectBoundingBox"
x = "0%" y = "0%" width = "100%"
height = "100%" >
< feComponentTransfer i
n = "BackgroundImage" result = "A" >
< feFuncG type = "discrete"
tableValues = "1 0.5 0.5 0.5" />
</ feComponentTransfer >
</ filter >
</ defs >
< image x = "10" y = "10" width = "280"
height = "350" preserveAspectRatio = "true"
xlink:href =
< image x = "310" y = "10" width = "280"
height = "350" preserveAspectRatio = "true"
filter = "url(#new)"
xlink:href =
</ svg >
</ body >
</ html >
|
Output:
Example 3: The following code demonstrates the <feFuncG> element with the type “gamma” and attributes like “amplitude”,”exponent”,”offset” are set with values.
HTML
<!DOCTYPE html>
< html >
< head >
< title >SVG feFuncG Element</ title >
</ head >
< body >
< svg width = "640" height = "550"
viewBox = "0 0 640 550" >
< defs >
< filter id = "new"
filterUnits = "objectBoundingBox"
x = "0%" y = "0%" width = "100%"
height = "100%" >
< feComponentTransfer
in = "BackgroundImage" result = "A" >
< feFuncG type = "gamma" amplitude = "3"
exponent = "3" offset = "0" >
</ feFuncG >
</ feComponentTransfer >
</ filter >
</ defs >
< image x = "10" y = "10" width = "280" height = "350"
preserveAspectRatio = "true"
xlink:href =
< image x = "310" y = "10" width = "280" height = "350"
preserveAspectRatio = "true" filter = "url(#new)"
xlink:href =
</ svg >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...