В SVG можно настраивать радиальный и линейный градиент. В этом мануале мы поговорим о том, как создавать радиальный градиент в 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,radialGradient и stop:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> <style>.eye{fill:#F9EC31;}</style> <defs> <radialGradient id="bones-gradient"> <stop offset="0%" style="stop-color:#FF9133;" /> <stop offset="100%" style="stop-color:#FF0015;" /> </radialGradient> </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:#211533;}</style> <defs> <radialGradient id="bones-gradient"> <stop offset="0%" style="stop-color:#5AA8DF;stop-opacity:1" /> <stop offset="50%" style="stop-color:#FB7629;stop-opacity:0.7" /> <stop offset="100%" style="stop-color:#FAE9B0;stop-opacity:0.5" /> </radialGradient> </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"> <defs> <radialGradient id="gradient1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:#FF00FF;" /> <stop offset="100%" style="stop-color:#FFBD2E;" /> </radialGradient> <radialGradient id="gradient2" cx="50%" cy="50%" r="70%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:#FF00FF;" /> <stop offset="100%" style="stop-color:#FFBD2E;" /> </radialGradient> <radialGradient id="gradient3" cx="20%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:#FF00FF;" /> <stop offset="100%" style="stop-color:#FFBD2E;" /> </radialGradient> <radialGradient id="gradient4" cx="50%" cy="50%" r="50%" fx="20%" fy="90%"> <stop offset="0%" style="stop-color:#FF00FF;" /> <stop offset="100%" style="stop-color:#FFBD2E;" /> </radialGradient> <radialGradient id="gradient5" cx="20%" cy="20%" r="50%" fx="20%" fy="20%"> <stop offset="0%" style="stop-color:#FF00FF;" /> <stop offset="100%" style="stop-color:#FFBD2E;" /> </radialGradient> <radialGradient id="gradient6" cx="50%" cy="50%" r="50%" fx="80%" fy="80%"> <stop offset="0%" style="stop-color:#FF00FF;" /> <stop offset="100%" style="stop-color:#FFBD2E;" /> </radialGradient> </defs> <!-- top left circle --> <circle cx="40" cy="60" r="30" fill="url(#gradient1)" /> <!-- top center circle --> <circle cx="100" cy="60" r="30" fill="url(#gradient2)" /> <!-- top right circle --> <circle cx="160" cy="60" r="30" fill="url(#gradient3)" /> <!-- bottom left circle --> <circle cx="40" cy="140" r="30" fill="url(#gradient4)" /> <!-- bottom center circle --> <circle cx="100" cy="140" r="30" fill="url(#gradient5)" /> <!-- bottom right circle --> <circle cx="160" cy="140" r="30" fill="url(#gradient6)" /> </svg>
Вкратце рассмотрим только что использованные свойства:
- cx & cy: положение центра градиента, влияет на весь градиент.
- r: радиус окружности градиента.
- fx & fy: положение фокуса градиента, влияет на 1-е положение остановки цвета.
Читайте также: Как создать конический градиент в CSS