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.
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.
