Динамическое создание градиента вдоль пути SVG

#javascript #html #css #svg #анимация

Я динамически создаю  путь, используя  SVG. Далее я хочу добавить градиент к своему
пути, но я застрял.    

Как я пытался сделать, показано на изображении 2. Мой градиент идет вдоль пути, но
мне нужно, чтобы градиент имел вид, как на изображении 1.   

   

Изображение 1   

    

Изображение 2    

Мои определения gradient и stroke следующие:     








скрипт    



svgPath.setAttribute("stroke", "url(#grad1");`
svgPath.setAttribute("fill", "none");
svgPath.setAttribute("stroke-linejoin", "round");`
svgPath.setAttribute("stroke-width", "10");
});



    

Ответы

Ответ 1

Решил привести пример анимации появления polyline, пришлось заключить animate в каждый
polyline, чтобы получить нужный результат, а далее можно кастомизировать анимацию,
как душа пожелает(имею ввиду изменение местоположения(from="N,N etc."):



polyline {
  stroke-linejoin: round;
  fill: none;
  animation: opac 3s 1;
}

@keyframes opac {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}



Ответ 2

Вы не можете сделать градиент  вдоль всего пути, поворачивая его по углам, так как
вы хотите.   

Если вместо этого вы просто хотите сделать так, чтобы градиент был ориентирован вертикально,
то вам нужно использовать атрибуты x1, y1, x2 и y2 для установки строки, вдоль которой
выполняется градиент.      

Если вы не укажете эти атрибуты, градиент ориентирован горизонтально в соответствии
с вашим вторым изображением.    


    
    
    
   

Если вы хотите иметь эффект «трубы», похожий на градиент, то самым простым способом
является многоуровневый путь с разной шириной строк.      



svg {
stroke-linejoin:round;
fill:none;
}





Прим. переводчика   

Я выбрал этот относительно простой топик для перевода, так как здесь использована
оригинальная техника имитации градиента вдоль сложного пути, которая может быть использована
на практике и для реализации эффекта анимации постепенного заполнения труб и других
емкостей.   

Источник: Creating a layer of gradient within an SVG path dynamically @Paul LeBeau


Ответ 3

Вариант анимации polyline



svg {
stroke-linejoin:round;
fill:none;
}





Вариант анимации path


Переводим координаты polyline в координаты path  
Всем патчам, которые отвечают за оттенки псевдоградиента присваиваем
одинаковый класс class-"poly"    
анимируем все патчи одновременно, используя атрибуты
stroke-dasharray, stroke-dashoffset     




svg {
stroke-linejoin:round;
fill:none;
}
.poly {
stroke-dasharray: 850 850;
  stroke-dashoffset: 850;
  animation-duration: 7s;
  animation-name: draw;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
} 

@keyframes draw {
  from {
    stroke-dashoffset: 850;
  }

  to {
    stroke-dashoffset: 0;
  }
}