如何合并三个路径并填充渐变

Question

我创建了三个路径：

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

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