SVG Градиент - Линейный

SVG Градиент

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

Есть два основных типа SVG Градиент:

линейный
радиальный

SVG линейные градиенты - <LinearGradient>

Элемент <LinearGradient> используется для определения линейного градиента.

<LinearGradient> Тег должен быть вложен в интерьере <DEFS>. Тег <Defs> являются определения акроним, такие как специальные элементы, которые могут быть определены как градиент.

Линейный градиент можно определить как горизонтальные, вертикальные или угол градиента:

Когда Y1 и Y2 равны, но не оба x1 и x2, создают горизонтальный градиент
Когда x1 и x2 равно, y1 и y2 не то же самое, вы можете создать вертикальный градиент
Когда x1 и x2 различны и y1 и y2 не то же самое, вы можете создать градиент угол

Пример 1

Он определяет горизонтальную линейный градиент от желтого до красного овала:

Вот SVG код:

примеров

Попробуйте »

Для пользователей Opera: вид SVG - файла (щелкните правой кнопкой мыши на источнике предварительного просмотра SVG графики).

Анализ кода:

тег атрибут ID <LinearGradient> может быть уникальное имя для определения градиента
<LinearGradient> Тег X1, X2, Y1, Y2 атрибут определяет начало и конец градиента
Градиент цветовая гамма двух или более цветов. Каждый цвет с помощью <Стоп> тег, чтобы указать. Смещение используется для определения начальную и конечную позицию градиента.
Заполните элемент свойства, чтобы связать с градиентом эллипса