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

Question

我正在使用我的 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");
});

Answer 1

如果您的意思是这样的话，您不能沿着路径的笔划、在拐角处转弯等制作渐变运行。

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

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

如果你想有"pipe"的渐变效果，那么最简单的方法就是叠加多个不同笔画宽度的路径。

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

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

Answer 2

回答@Paul LeBeau 启发，非常有趣的技术 - 沿曲线路径渐变的模仿。

此技术可用于制作流体沿管道移动的动画，填充容器。
我试着做了这样一个动画例子

实现动画的步骤：

我们将上面示例中的 polyline 命令替换为 path 命令。
所有模仿 pseudo-gradient 阴影的补丁都是分配相同的 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>

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

Creating a layer of gradient within an SVG path dynamically

svg

gradient

path

mouseevent