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

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

В 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