SVG渐变作为具有绝对位置的折线描边背景 [英] 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>

折线的笔划:

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

(折线具有最大/最小位置点)

(polyline have max/min position points)

结果还可以:

但是，当折线是平坦的时:

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.

推荐答案

如果要在用户空间中应用渐变，则可以这样表示渐变:

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

请参见小提琴.

然后，x1，y1，x2和y2中的值将相对于当前用户空间坐标系，因此，如果使用百分比，则它们将相对于最近的视口，而不是相对于使用渐变的形状的边界框.有关详细信息，请参见 svg规范.

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.

这篇关于SVG渐变作为具有绝对位置的折线描边背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！