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

В SVG есть два типа градиентов: линейный и радиальный. Пример реализации линейного градиента:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
 "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="100%" height="100%">
    <defs>
        <linearGradient id="gradientDefinition" gradientUnits="userSpaceOnUse">
            <stop stop-color="yellow" stop-opacity=".2" offset="0%"/>
            <stop stop-color="black" offset="100%"/>
        </linearGradient>
    </defs>
    
    <rect x="60" y="60" width="400" height="200" stroke-width="4" stroke="red" stroke-dasharray="2 2 2 2" fill="black"/>
    <rect x="50" y="50" width="400" height="200" stroke-width="4" stroke="red" stroke-dasharray="2 2 2 2" fill="url(#gradientDefinition)"/>
</svg>

Линейный градиент определяется в контейнере defs с помощью элемента linearGradient. Чтобы потом можно было назначить градиент конкретной фигуре для определения градиента задается атрибут id. Назначить градиент фигуре можно указав id градиента как значение атрибута fill фигуры.


fill="url(#gradientDefinition)"

Сам градиент определяется неким набором контрольных точек - стопов. Похоже на Photoshop (ну в принципе во всех графических редакторах это делается одинаково). Только в Photoshop'e это делается визуально через GUI, а здесь задается текстово. Для каждого стопа можно указать цвет, прозрачность, смещение...

Теги: