Как создать линейный градиент в SVG

Development | Amber | Комментировать запись

Конечно, большую часть времени вы будете создавать SVG файлы с помощью Adobe Illustrator и других подобных инструментов, а не кодировать их вручную. И все же в SVG есть некоторые функции, которые сделают ваши изображения привлекательнее, и их очень легко реализовать вручную. Линейные градиенты — одна из таких функций.

Давайте рассмотрим на примере, как это работает. Будем учиться вот на этом изображении:

Вот так выглядит SVG-разметка для него (для простоты пути заменены троеточием).

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <style>.bones{fill:#ccc ;} .eye{fill:#666;}</style>

  <path class="bones" d="..."/>

  <path class="bones" d="..."/>

  <g>
    <path class="eye" d="..."/>
    <path class="eye" d="..."/>
  </g>
</svg>

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

Разметка этого изображения выглядит так. Обратите внимание на элементы defs, linearGradient и stop:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <style>.eye{fill:#F9EC31;}</style>

  <defs>
    <linearGradient id="bones-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                  <stop offset="0%" style="stop-color:#FF9133;" />
                  <stop offset="100%" style="stop-color:#FF0015;" />
    </linearGradient>
  </defs>

  <g fill="url(#bones-gradient)">
                  <path class="bones" d="..."/>
                  <path class="bones" d="..."/>
  </g>

  <g>
    <path class="eye" d="..."/>
    <path class="eye" d="..."/>
  </g>
</svg>

Давайте также попробуем создать градиент с несколькими цветовыми остановками и непрозрачностью. Также обратите внимание на использование fill-opacity для обработки глаз.

Разметка для него выглядит следующим образом:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <style>.eye{fill:#211533; fill-opacity: 0.5;}</style>

  <defs>
                <linearGradient id="bones-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                  <stop offset="0%" style="stop-color:#f8f8f8;stop-opacity:0.5" />
                  <stop offset="50%" style="stop-color:#fc00ff;stop-opacity:1" />
                  <stop offset="100%" style="stop-color:#f8f8f8;stop-opacity:0.5" />
                </linearGradient>
  </defs>

  <g fill="url(#bones-gradient)">
                  <path class="bones" d="..."/>

                  <path class="bones" d="..."/>
  </g>

  <g>
    <path class="eye" d="..."/>
    <path class="eye" d="..."/>
  </g>
</svg>

Последний пример – мы используем градиент под другим углом:

Вот его разметка:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <style>.eye{fill:#F9EC31;}</style>

  <defs>
                <linearGradient id="bones-gradient" x1="0%" y1="0%" x2="50%" y2="100%">
                  <stop offset="0%" style="stop-color:blue;" />
                  <stop offset="100%" style="stop-color:#FF0015;" />
                </linearGradient>
  </defs>

  <g fill="url(#bones-gradient)">
                  <path class="bones" d="..."/>

                  <path class="bones" d="..."/>
  </g>

  <g>
    <path class="eye" d="...."/>
    <path class="eye" d="..."/>
  </g>
</svg>

Как видите, создать линейный градиент в SVG довольно легко.

Читайте также: Как создать радиальный градиент в SVG