svg - 在 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 属性来设置渐变运行的线条。如果您不指定这些属性，渐变将按照您的第二个图像水平定向。

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