在 SVG 路径中动态创建渐变层答案

【问题标题】：Creating a layer of gradient within an SVG path dynamically在 SVG 路径中动态创建渐变层
【发布时间】：2017-09-06 08:08:46
【问题描述】：

我正在使用我的 SVG 创建动态路径。我现在想为我的路径添加渐变，但我被卡住了。我正在尝试的方式是，我的渐变沿着图 2 所示的路径前进，而我要求它是图 1 中的那种。

当前

我的渐变和描边定义如下：

    <defs>
        <linearGradient id = "grad1" spreadMethod="reflect">
            <stop offset="0%" style="stop-color: lightcoral;" />
            <stop offset="50%" style="stop-color: #ffffff;" />
            <stop offset="100%" style="stop-color: lightcoral;" />
        </linearGradient>
    </defs>
</svg>

脚本：

svgPath.setAttribute("stroke", "url(#grad1");`
svgPath.setAttribute("fill", "none");
svgPath.setAttribute("stroke-linejoin", "round");`
svgPath.setAttribute("stroke-width", "10");
});

【问题讨论】：

标签： svg path mouseevent gradient

【解决方案1】：

如果这就是你的意思，你不能让渐变沿着路径的笔触运行，在拐角处转弯等。

如果您只是想让渐变垂直定向，那么您需要使用x、y1、x2 和y2 属性来设置渐变运行的线。如果您不指定这些属性，则渐变将按照您的第二张图像水平定向。

<linearGradient id = "grad1" spreadMethod="reflect" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" style="stop-color: lightcoral;" />
    <stop offset="50%" style="stop-color: #ffffff;" />
    <stop offset="100%" style="stop-color: lightcoral;" />
</linearGradient>

如果你想拥有类似“管道”的渐变效果，那么最简单的方法就是将不同笔触宽度的多条路径分层。

这里有一个简单的例子来演示。

<svg fill="none">
  <polyline points="0,125, 150,125 150,25, 300,25" stroke="#666" stroke-width="30"/>
  <polyline points="0,125, 150,125 150,25, 300,25" stroke="#999" stroke-width="24"/>
  <polyline points="0,125, 150,125 150,25, 300,25" stroke="#ccc" stroke-width="16"/>
  <polyline points="0,125, 150,125 150,25, 300,25" stroke="#eee" stroke-width="6"/>
</svg>

【讨论】：

谢谢@Paul LeBeau。是的，确实我想要一个类似管道的渐变效果，但我不想使用折线，而是想用路径来做。因为，它是在我的问题中使用鼠标动态创建的，知道如何在其中创建图层吗？
不管是路径还是折线。所有层的坐标都是相同的。唯一的区别是笔画粗细。那是假设您可以仅使用路径笔划绘制所需的管道。您需要比这更漂亮的管道形状吗？
没有。这样做可以，但是由于路径是通过鼠标的移动绘制的，所以我不知道如何将不同的笔画宽度合并到彼此中。 @PaulLeBeau
如果您的管道中有四个路径，那么您只需在添加点时更新所有路径。
好的。我将尝试并更新。非常感谢。

【解决方案2】：

Answer @Paul LeBeau 启发了非常有趣的技术 - 沿着曲线路径模仿渐变。

这种技术可用于动画流体沿管道的运动，填充容器。
我试图制作这样一个动画示例。我希望有人会派上用场。

动画实现步骤：

我们将上面示例中的polyline 命令替换为path 命令。
所有模仿伪渐变阴影的补丁都是分配相同的class="poly"
我们使用属性同时为所有补丁设置动画 stroke-dasharray,stroke-dashoffset

svg {
stroke-linejoin:round;
fill:none;
}
.poly {
stroke-dasharray: 850 850;
  stroke-dashoffset: 850;
  animation-duration: 7s;
  animation-name: draw;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
} 

@keyframes draw {
  from {
    stroke-dashoffset: 850;
  }

  to {
    stroke-dashoffset: 0;
  }
}

<svg width="400" height="400" viewBox="0 0 400 400"> 
   <path             d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#7C7C7C" stroke-width="30" />
  <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#4E4E4E" stroke-width="30" />
  <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#5C5C5C" stroke-width="28" />
  <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#6E6E6E" stroke-width="24" />
  <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#7C7C7C" stroke-width="22" /> 
  <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#828282" stroke-width="20" />
  <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#8D8D8D" stroke-width="18" />
  <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#9F9F9F" stroke-width="16" />
  <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#ADADAD" stroke-width="14" />
  <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#BDBDBD" stroke-width="8" />
  <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#C5C5C5" stroke-width="6" />
  <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#D2D2D2" stroke-width="4" />
  <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#D6D6D6" stroke-width="2" />
</svg>

【讨论】：