Конечно, большую часть времени вы будете создавать 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