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

Question

[nikmil]

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

Answer 1

[Elaryks]

В целом, нечто подобное можно сделать без использования JavaScript:

Comments

[nikmil]

js это просто анимация которая показывает суть прыжка. Хотелось показать как цвет прыгает

Answer 2

[false07]

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

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

Animation.linearinterpolation(currentPosision, newPosition, 0.1)

Answer 3

[Roman]

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();