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 you have read our privacy policy.

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