@nikmil

Как заставить gradient svg не дергаться при уменьшении и при увелечение?

Здравствуйте, у меня проблема в том что градиент в svg дергается. Задача состоит в том, чтобы цвет плавно изменялся и высота тоже. В чем причина?
Спасибо за помощь!

  • Вопрос задан
  • 106 просмотров
Пригласить эксперта
Ответы на вопрос 3
Elaryks
@Elaryks
В целом, нечто подобное можно сделать без использования JavaScript:

Ответ написан
@false07
Можно использовать линейную интерполяцию
Формула: public static linearInterpolation(a: number, b: number, t: number) {
return a + (b - a) * t
}

a = текущая позиция
b = обновленная позиция (будущая)
t = интервал

Animation.linearinterpolation(currentPosision, newPosition, 0.1)
Ответ написан
Комментировать
@Kypidon4ik
Фрилансер, Wordpress developer
function changeSVGValuesPeriodically() {
  let height = 300;
  let decreasing = true; 
  const interval = setInterval(() => {
    console.log("Current height:", height);

    let gradientColor;
    if (height >= 0 && height < 100) {
      gradientColor = "#FF0000";
    } else if (height >= 100 && height < 200) {
      gradientColor = "#FF6600"; 
    } else {
      gradientColor = "#003822"; 
    }

    if (decreasing) {
      height -= 2;
      if (height <= 0) {
        decreasing = false;
      }
    } else {
      height += 2;
      if (height >= 300) {
        decreasing = true;
      }
    }

    const svgElement = document.querySelector('.line svg');
    const rectElement = document.querySelector('.line rect');
    const imgElement = document.querySelector('.img');
    svgElement.setAttribute('height', height);
    svgElement.setAttribute('viewBox', `0 0 10 ${height}`);
    const gradientElement = document.querySelector('#paint0_linear_1633_114613');
    gradientElement.querySelector('stop').setAttribute('stop-color', gradientColor);
    gradientElement.querySelector('stop').setAttribute('offset', height / 300);
    rectElement.setAttribute('height', height);
    imgElement.style.height = `${height}px`;
  }, 40); 
}

changeSVGValuesPeriodically();
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы