SVG <feFuncG> Element
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= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png" /> <image x="310" y="10" width="280" height="350" preserveAspectRatio="true" filter="url(#new)" xlink:href= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png" /> </svg> </body> </html> |
Output:
Please Login to comment...