SVG <feFuncR> Element
Last Updated :
25 Aug, 2022
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.
In this article, we will learn about the <feFuncR> element which is an SVG filter primitive that is used to transfer function for the red component of the input graphic of its parent <feComponentTransfer> element. <feComponentTransfer> element implements color manipulations on each color channel separately.
The four color channels of this element are as follows.
- <feFuncR> element: This element is used to transfer function for the red component of the input graphic of its parent <feComponentTransfer> element.
- <feFuncG> element: This element is used to transfer function for the green component of the input graphic of its parent <feComponentTransfer> element.
- <feFuncB> element: This element is used to transfer function for the blue component of the input graphic of its parent <feComponentTransfer> element.
- <feFuncA> element: This element is used to transfer function for the alpha component of the input graphic of its parent <feComponentTransfer> element.
Note: Remember when you perform color manipulations the element should only have one child element of each type.
Syntax:
<feFuncR type="type_name" tableValues="value_name"/>
The core attribute used:
- id: It is used to assign a unique name to an element
- lang: It is used to specify the primary language used in contents and attributes containing text content of particular elements.
- tabindex: It is used to allow you to control whether an element is focusable and to define the relative order of the element for the purposes of sequential focus navigation.
- xml:base: It is used to specify a base IRI other than the base IRI of the document or external entity.
- xml:lang: It is used to be the primary language used in contents and attributes containing text content of particular elements.
- xml:space: It is used to handle whitespace characters inside elements.
Transfer function attributes:
- type: It is a generic attribute and it has different meanings based on the context in which it’s used.
- tableValues: It is used to define a list of numbers defining a lookup table of values for a color component transfer function.
- slope: It is used to indicate the vertical stroke angle of a font.
- intercept: It is used to define the intercept of the linear function of color component transfers when the type attribute is set to linear.
- amplitude: It is used to control the amplitude of the gamma function of a component transfer element when its type attribute is gamma.
- exponent: It is used to define the exponent of the gamma function.
Example 1: In the below code, we will make use of the SVG <feFuncR> element.
HTML
<!DOCTYPE html>
< html >
< 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 >
< feFuncR type = "table"
tableValues = "0 0 1 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: In the below code, we will make use of the <feFuncR> element.
HTML
<!DOCTYPE html>
< html >
< 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 >
< feFuncR type = "table"
tableValues = "1 0 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:
Reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feFuncR
Share your thoughts in the comments
Please Login to comment...