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 that you have read and understand our privacy policy and code of conduct.

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