Элемент SVG

HTML-файл ссылается на соответствующий CSS-файл, добавляя элемент Изучение

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: используется для определения экспоненты гамма-функции.
Читайте также:  Как создать отзывчивые компоненты React с помощью React Textfit?

Пример 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>
Оцените статью
bestprogrammer.ru
Добавить комментарий

Adblock
detector