Элемент SVG <feDistantLight>
SVG означает масштабируемую векторную графику. Он в основном определяет векторную графику в формате XML. Графика SVG НЕ теряет качества при увеличении или изменении размера. Каждый элемент и каждый атрибут в файлах SVG можно анимировать.
Примитив фильтра SVG <feDiffuseLighting> освещает изображение, используя альфа-канал в качестве карты рельефа. При рассеянном освещении стороны объекта, обращенные к свету, ярче, а стороны, обращенные в сторону, темнее и находятся в тени.
Два канала <feDiffuseLighting> выглядят следующим образом.
- Элемент <fePointLight/>: Этот элемент используется для определения источника света, который позволяет создавать эффект точечного освещения.
- Элемент <feDistantLight/>: этот элемент используется для определения удаленного источника света, который можно использовать в примитиве фильтра освещения, а именно <feDiffuseLighting> или <feSpecularLighting>.
Используемый атрибут:
- id: используется для присвоения уникального имени элементу.
- lang: используется для указания основного языка, используемого в содержимом и атрибутах, содержащих текстовое содержимое определенных элементов.
- tabindex: он используется, чтобы позволить вам контролировать, доступен ли элемент для фокусировки, и определять относительный порядок элемента для целей последовательной навигации по фокусу.
- xml:base: используется для указания базового IRI, отличного от базового IRI документа или внешнего объекта.
- xml:lang: используется в качестве основного языка, используемого в содержимом и атрибутах, содержащих текстовое содержимое определенных элементов.
- xml:space: используется для обработки пробелов внутри элементов.
атрибут азимута: используется для указания угла направления источника света в плоскости XY (по часовой стрелке) в градусах от оси x.
высота: используется для указания угла направления источника света от плоскости XY к оси Z в градусах.
Пример 1: В приведенном ниже коде мы будем использовать элемент <feDistantLight>.
Выход:
Пример 2: В приведенном ниже коде мы будем использовать элемент <feDistantLight> .
Выход:
Ссылка: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDistantLight