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

【问题标题】：How to merge three paths and fill with gradient如何合并三个路径并用渐变填充
【发布时间】：2019-11-03 01:26:12
【问题描述】：

我创建了三个路径：

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

【问题讨论】：

标签： svg merge path gradient

【解决方案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>

【讨论】：

绝妙的答案！伟大的！谢谢你:)
...还有一件事。如何使渐变范围不是从左到右而是从箭头的开头到箭头的结尾？
啊明白了”gradientTransform="rotate(65)"