3

Как правильно подобрать координаты обеспечивающие угол наклона градиента SVG элемента? Например,- 220deg?

.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" gradientUnits="userSpaceOnUse">
      <stop offset="2%" stop-color="#2C2C2C"/>
      <stop offset="50%" stop-color="#2C2C2C"/>
    </linearGradient>
  </defs>
</svg>

1
  • 1
    @Alexandr_TT, также не забудь описать атрибуты x1, y1, x2, y2=)
    – Arthur
    10 ноя 2018 в 18:16

2 ответа 2

8

Немного теории:

  • Координаты X1, Y1 — начало линии направления действия градиента

  • Координаты X2, Y2 — конец линии направления действия градиента

Для получения горизонтального градиентаx1="0" x2="100" y1="0" y2="0":

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

Чтобы цвета градиента встретились посередине необходимо установить:

<stop offset="50%" stop-color="#24bed2"/>
<stop offset="50%" stop-color="#F4FFAF"/> 

Вертикальный градиент

x1="0" x2="0" y1="0" y2="100"

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

Градиент под углом 45%

x1="0" x2="100" y1="0" y2="100" так как параметр gradientUnits="userSpaceOnUse", то значения 0 и 100 это не проценты, а пиксели. Окно просмотра у нас 200х200px, цвета градиента встречаются на половине, поэтому берем 100px (в svg пиксели можно не указывать)

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

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

Для анимации необходимо изменять координаты

Анимация горизонтального градиента

Необходимо добавить всего лишь одну строчку:

<animate attributeName="x1" dur="4s" values="0;200;200;0" repeatCount="indefinite" />    

.crc1 {
  fill: url('#grad1');
}
<svg class="the-svg" width="200px" height="200" viewBox="-20 -20 200 200">
  <circle class="crc1" cx="50" cy="50" r="50"  />
  <defs>
    <linearGradient id="grad1" x1="0" x2="0" y1="0" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="20%" stop-color="#24bed2"/>
      <stop offset="90%" stop-color="#F4FFAF"/>
    <animate attributeName="x1" dur="4s" values="0;200;200;0" repeatCount="indefinite" />
	</linearGradient>
  </defs>
</svg>

Для более интересного эффекта выбрал границы перекрытия отличающиеся от 50%:

<stop offset="20%" stop-color="#24bed2"/>
<stop offset="90%" stop-color="#F4FFAF"/>    

Анимация вертикального градиента

.crc1 {
  fill: url('#grad1');
}
<svg class="the-svg" width="200px" height="200" viewBox="-20 -20 200 200">
  <circle class="crc1" cx="50" cy="50" r="50"  />
  <defs>
    <linearGradient id="grad1" x1="0" x2="0" y1="0" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="20%" stop-color="#24bed2"/>
      <stop offset="90%" stop-color="#F4FFAF"/>
    <animate attributeName="y1" dur="4s" values="0;200;200;0" repeatCount="indefinite" />
    </linearGradient>
  </defs>
</svg>

Анимация градиента под углом с паузами в конечных точках

Анимируем сразу две координаты:

  <animate attributeName="x1" dur="5s" values="0;200;200;0" repeatCount="indefinite" />
    <animate attributeName="y1" dur="5s" values="0;200;200;0" repeatCount="indefinite" />   

.crc1 {
  fill: url('#grad1');
}
<svg class="the-svg" width="200px" height="200" viewBox="-10 -10 200 200">
  <circle class="crc1" cx="50" cy="50" r="50"  />
  <defs>
    <linearGradient id="grad1" x1="0" x2="0" y1="0" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="10%" stop-color="#24bed2"/>
      <stop offset="90%" stop-color="#F4FFAF"/>
      <animate attributeName="x1" dur="5s" values="0;200;200;0" repeatCount="indefinite" />
      <animate attributeName="y1" dur="5s" values="0;200;200;0" repeatCount="indefinite" />
    </linearGradient>
  </defs>
</svg>

1
  • 2
    Класс!Спасибо за ответы на все вопросы) 10 ноя 2018 в 18:37
5

С помощью gradientTransform:

.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" gradientUnits="userSpaceOnUse" gradientTransform="rotate(120)">
      <stop offset="2%" stop-color="#2C2C2C"/>
      <stop offset="50%" stop-color="#2C2C2C"/>
    </linearGradient>
  </defs>
</svg>

6
  • Я спросил: вы не собираетесь удалять свою учётную запись здесь потом? Иначе ответы останутся без хозяина.
    – Bharatha
    22 дек 2018 в 16:42
  • @Bharata, собираюсь, говорил об этом
    – Arthur
    22 дек 2018 в 16:44
  • Это очень плохо будет для всех – никто не сможет отследить ваши ответы потом. Они будут все разбросаны и вообще будет непонятно чей это ответ. Может всё-таки не будете так делать?
    – Bharatha
    22 дек 2018 в 16:46
  • @Bharata, аккаунт оставлю. Хорошо, я всё равно собирался присудить баллы вам
    – Arthur
    27 дек 2018 в 9:20
  • Вы перепутали – этот надо было оставить. :-) Но бог с ним уже – теперь можете и другой присудить. Благо дарю!
    – Bharatha
    27 дек 2018 в 9:26

Ваш ответ

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

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