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

1,00
р.
Я динамически создаю путь, используя 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")
})

Свободный перевод вопроса Creating a layer of gradient within an SVG path dynamically от участника @Muskan Sethia.

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

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


svg { stroke-linejoin:round fill:none }

Прим. переводчика
Я выбрал этот относительно простой топик для перевода, так как здесь использована оригинальная техника имитации градиента вдоль сложного пути, которая может быть использована на практике и для реализации эффекта анимации постепенного заполнения труб и других емкостей.
Свободный перевод ответа Creating a layer of gradient within an SVG path dynamically от участника @Paul LeBeau.