SVG 渐变作为具有绝对位置的折线描边背景

Question

是否可以设置应用于折线的渐变背景的绝对位置？

比如当我设置渐变时：

<filter id="black-glow">
    <feColorMatrix type="matrix" values=
       "0 0 0 0   0        
        0 0 0 0   0
        0 0 0 0   0
        0 0 0 1   0" />
    <feGaussianBlur stdDeviation="3" result="coloredBlur" />
    <feMerge>
      <feMergeNode in="coloredBlur" />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
</filter>

折线的笔划：

<polyline points="50,350 ... 350,239" style="fill:none;" stroke="url(#grad1)" stroke-width="3" stroke-linecap="round" />

（折线有 max/min 个位置点）

结果正常：

但是，当折线是平的时：

绿色要高很多。由于这是彩色图表，我需要实现不断查看背景，独立于折线的绘制方式。

Answer 1

如果你想在用户空间中应用渐变，那么可以通过如下方式表达渐变：

<linearGradient id="grad1" gradientUnits="userSpaceOnUse" x1="0"
                y1="350" x2="0" y2="220">

参见fiddle。

x1、y1、x2 和 y2 中的值将相对于当前用户空间坐标系，因此如果您使用百分比，它们将相对于最近的视口，而不是使用形状的边界框坡度。详情见svg specification。

SVG 渐变作为具有绝对位置的折线描边背景

SVG gradient as polylines stroke background with absolute position

svg

polyline

linear-gradients