Элемент SVG

SVG означает масштабируемую векторную графику. Его можно использовать для создания графики и анимации, как в холсте HTML.

В этой статье мы узнаем об элементе , который представляет собой примитив фильтра SVG, который используется для передачи функции для красного компонента входной графики его родительского элемента . Элемент реализует манипуляции с цветом на каждом цветовом канале отдельно.

Четыре цветовых канала этого элемента следующие.

Элемент <feFuncR>:этот элемент используется для передачи функции для красного компонента входной графики его родительского элемента <feComponentTransfer>.
Элемент <feFuncG>:этот элемент используется для передачи функции для зеленого компонента входной графики его родительского элемента <feComponentTransfer>.
Элемент <feFuncB>:этот элемент используется для передачи функции для синего компонента входной графики его родительского элемента <feComponentTransfer>.
Элемент <feFuncA>:этот элемент используется для передачи функции для альфа-компонента входной графики его родительского элемента <feComponentTransfer>.

Примечание. Помните, что при выполнении манипуляций с цветом у элемента должен быть только один дочерний элемент каждого типа.

Синтаксис:

<feFuncR type="type_name" tableValues="value_name"/>

Используемый основной атрибут:

id:используется для присвоения уникального имени элементу
lang:используется для указания основного языка, используемого в содержимом и атрибутах, содержащих текстовое содержимое определенных элементов.
tabindex:он используется, чтобы позволить вам управлять тем, доступен ли элемент для фокусировки, и определять относительный порядок элемента для целей последовательной навигации по фокусу.
xml:base: используется для указания базового IRI, отличного от базового IRI документа или внешнего объекта.
xml:lang: используется в качестве основного языка, используемого в содержимом и атрибутах, содержащих текстовое содержимое определенных элементов.
xml:space: используется для обработки пробелов внутри элементов.

Атрибуты передаточной функции:

type:это общий атрибут, и он имеет разные значения в зависимости от контекста, в котором он используется.
tableValues:используется для определения списка чисел, определяющих справочную таблицу значений для функции передачи компонента цвета.
slope: используется для обозначения вертикального угла штриха шрифта.
intercept используется для определения перехвата линейной функции переноса компонентов цвета, когда для атрибута type установлено значение linear.
amplitude: используется для управления амплитудой гамма-функции элемента переноса компонента, когда его атрибутом типа является гамма.
exponent: используется для определения экспоненты гамма-функции.

Пример 1. В приведенном ниже коде мы будем использовать элемент SVG .

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=

"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png" />

        <image x="310" y="10" width="280" height="350"

            preserveAspectRatio="true" filter="url(#new)"

            xlink:href=

"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png" />

    </svg>

</body>

</html>

Пример 2: В приведенном ниже коде мы будем использовать элемент .

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=

"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png" />

        <image x="310" y="10" width="280" height="350"

            preserveAspectRatio="true" filter="url(#new)"

            xlink:href=

"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png" />

    </svg>

</body>

</html>