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

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>

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

How to merge three paths and fill with gradient

merge

svg

gradient

path