13

Необходимо сделать плавный, красивый переход с одного основного цвета градиента, например красного на синий.

Код примера:

.crc1 {
  fill: url('#grad1');
}
 <svg class="the-svg" width="200px" viewBox="0 0 100 100">
  <circle class="crc1" cx="50" cy="50" r="50"/>
  <defs>
    <linearGradient id="grad1" x1="0" x2="0" y1="62" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="23%" stop-color="red"/>
      <stop offset="100%" stop-color="dodgerblue"/>
    </linearGradient>
  </defs>
</svg>

Для плавности нужно использовать анимацию при наведении курсора на svg элемент.

1 ответ 1

14

Вариант #1

В начальном состоянии градиент имеет один цвет - красный

 <stop offset="40%" stop-color="red"/>
 <stop offset="100%" stop-color="red"/>   

При наведении курсора градиент состоит из двух цветов:

.crc1:hover ~ defs stop:first-child {
  stop-color: #24bed2;
}
.crc1:hover ~ defs stop:last-child {
  stop-color: #32ffe4;
}

Ниже полный код

.crc1 {
  fill: url('#grad1');
}
.crc1 ~ defs stop {
  transition: 2s;
}

.crc1:hover ~ defs stop:first-child {
  stop-color: #24bed2;
}
.crc1:hover ~ defs stop:last-child {
  stop-color: #32ffe4;
}
<svg class="the-svg" width="200px" viewBox="0 0 100 100">
  <circle class="crc1" cx="50" cy="50" r="50"/>
  <defs>
    <linearGradient id="grad1"
      x1="0"
      x2="0"
      y1="62"
      y2="0"
      gradientUnits="userSpaceOnUse">
       <stop offset="40%" stop-color="red"/>
       <stop offset="100%" stop-color="red"/>
    </linearGradient>
  </defs>
</svg>

Вариант #2

Двухцветный градиент.

Техника реализации та же, что и в первом варианте, но в начальном и конечном состоянии анимации у градиента два цвета меняются на два других цвета.

При подборе цветовой гаммы можно найти интересные варианты.

Например: вариант ниже напоминает море, когда на смену ночи приходит яркий, солнечный день.

.crc1 {
  fill: url('#grad1');
}
 .crc1 ~ defs stop {
  transition: 3s;
}

.crc1 ~ defs stop:first-child {
  stop-color: #24bed2;
}
.crc1:hover ~ defs stop:last-child {
  stop-color: #F4FFAF;
} 
<svg class="the-svg" width="200px" height="200" viewBox="-10 -10 120 120">
  <circle class="crc1" cx="50" cy="50" r="50"  stroke="#F4FFAF"/>
  <defs>
    <linearGradient id="grad1" x1="0" x2="0" y1="90" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="2%" stop-color="#2C2C2C"/>
      <stop offset="50%" stop-color="#2C2C2C"/>
    </linearGradient>
  </defs>
</svg>

Вариант #3

Анимация градиента для текста

.crc1 {
  fill: url('#grad1');
}
.crc1 ~ defs stop {
  transition: 2s;
}

.crc1 ~ defs stop:first-child {
  stop-color: dodgerblue;
}
.crc1:hover ~ defs stop:last-child {
  stop-color: gold;
}
<svg class="the-svg" width="400px" height="400px" viewBox="0 0 250 250">
   <!-- <circle class="crc11" cx="50" cy="50" r="50"/> -->
   <rect width="100%" height="50%" fill="#212121" />
  <text class="crc1" font-size="120" font-family="serif" font-weight="600" x="10" y="100" >Text </text>
  <defs>
    <linearGradient id="grad1"
      x1="0"
      x2="0"
      y1="200"
      y2="0"
      gradientUnits="userSpaceOnUse">
      <stop offset="35%" stop-color="#FF1B1B"/>
      <stop offset="80%" stop-color="#FF1B1B"/>
    </linearGradient>
  </defs>
</svg>

1
  • 4
    отлично мне понравилсья плюсанул и ответ и вопрос
    – Randall
    9 авг 2018 в 17:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.