Линейный градиент SVG

Градиент SVG должен быть определен в теге <defs>.

Градиент SVG

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

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

  • Линейный градиент
  • Радиальный градиент

Линейный градиент

Тег <linearGradient> используется для определения линейного градиента в SVG.

Тег <linearGradient> должен быть вложен в тег <defs>. Тег <defs> является аббревиатурой от definitions и используется для определения специальных элементов, таких как градиенты.

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

  • Если y1 и y2 равны, а x1 и x2 различаются, можно создать горизонтальный градиент
  • Если x1 и x2 равны, а y1 и y2 различаются, можно создать вертикальный градиент
  • Если x1 и x2 различаются, а y1 и y2 различаются, можно создать градиент с угловыми переходами

Скопируйте следующий код в блокнот и сохраните файл как "linear1.svg". Поместите этот файл в вашу веб-директорию:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

Комментарий к коду:

  • Атрибут id тега <linearGradient> может определить уникальное имя градиента
  • Атрибут fill:url(#orange_red) связывает элемент ellipse с этим градиентом
  • Атрибуты x1, x2, y1, y2 тега <linearGradient> могут определить начало и конец градиента
  • Интервал цветов градиента может состоять из двух или более цветов. Каждому цвету соответствует тег <stop>. Атрибут offset используется для определения начала и конца градиента.

См. пример (горизонтальное渐变)

Другой пример:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

Просмотр примера (вертикальный градиент)