Как объединить три пути и заполнить градиентом

Я создал три пути:

<svg width = "400" height = "400" xmlns = "http://www.w3.org/2000/svg">
  <path d = "M 10 100 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke = "black" fill = "transparent"/>
  <path d = "M 10 90 C 40 00, 65 00, 95 70 S 150 140, 180 70" stroke = "black" fill = "transparent"/> 
  <path d = "M250 75 L180 120 L180 30 Z" stroke = "black" fill = "transparent"/>
</svg>

Как я могу объединить пути и заполнить их градиентом? Я также создал для этого СКРИПКА.

svg merge path gradient

20.06.2019 10:52

Создание фильтров для вашего сайта

Фильтры - удобный инструмент в арсенале веб-дизайнера. Они позволяют изменять элементы на странице с помощью всего нескольких строк кода. Эти...

Анимация SVG-узоров без единой строки CSS

Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...

Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?

D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы объединить три пути, вы объединяете атрибуты d в один. Однако, поскольку в этом случае обе кривые нарисованы в одном направлении, я перевернул одну из них и изменил начальную команду (M) на линию L. Надеюсь, это то, что вам нужно.

<svg width = "400" height = "400" xmlns = "http://www.w3.org/2000/svg">
  <defs>
  <linearGradient id = "lg">
   <stop offset = "0%" stop-color = "hsl(120,100%,30%)"></stop>
   <stop offset = "50%" stop-color = "white"></stop>
   <stop offset = "100%" stop-color = "hsl(320,100%,50%)"></stop>
  </linearGradient>
 </defs>
  <path d = "M 10 100 C 40 10, 65 10, 95 80 S 150 150, 180 80
           L180,70C150,140 125,140 95,70C65,00 40,00 10,90
           M250 75 L180 120 L180 30 Z" stroke = "black" fill = "url(#lg)"/>
</svg>

Фантастический ответ! Здорово! Спасибо :)

— 20.06.2019 12:10

... еще кое-что. Как я могу сделать градиент не слева направо, а от начала стрелки до конца стрелки?

— 20.06.2019 13:30

а понял" gradientTransform = "rotate(65)"

— 20.06.2019 13:31

20.06.2019 11:03