Как объединить три пути и заполнить градиентом - PullRequest
Новая
       28

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

1 голос
/ 20 июня 2019

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

<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>

Как я могу объединить пути и заполнить их градиентом? Для этого я также создал FIDDLE .

enter image description here

1 Ответ

2 голосов
/ 20 июня 2019

Чтобы объединить три пути, вы объединяете атрибуты 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>
...