SVG gradient as polylines stroke background with absolute position

问题

Is there the ability to set absolute position of the gradient background applied to polyline?

For example when I set gradient:

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

to polyline's stroke:

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

(polyline have max/min position points)

Result is ok:

But, when polyline is flat:

Green colour is much higher. Since this is coloured chart, I need to achieve constantly looking background, independently of the way polyline is draw.

回答1:

If you want the gradient to be applied in userspace then that's possible by expressing the gradient like this:

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

See fiddle.

The values in x1, y1, x2 and y2 will then be relative to the current userspace coordinate system, so if you use percentages they will be relative to the closest viewport, not to the boundingbox of the shape that uses the gradient. See the svg specification for the details.

来源：https://stackoverflow.com/questions/29750227/svg-gradient-as-polylines-stroke-background-with-absolute-position