是否能够设置应用于折线的渐变背景的绝对位置?
例如当我设置渐变时:
<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" />
(折线有最大/最小位置点)
结果没问题:
但是,当折线平坦时:
绿色的颜色要高得多。由于这是彩色图表,因此我需要实现不断查看背景,而与绘制折线的方式无关。
如果您希望将渐变应用于用户空间,则可以通过如下表示渐变来实现:
<linearGradient id="grad1" gradientUnits="userSpaceOnUse" x1="0"
y1="350" x2="0" y2="220">
See fiddle http://jsfiddle.net/azuL1ets/1/.
x1、y1、x2 和 y2 中的值将相对于当前用户空间坐标系,因此如果您使用百分比,它们将相对于最近的视口,而不是相对于使用渐变的形状的边界框。请参阅SVG 规范 https://svgwg.org/svg2-draft/pservers.html#LinearGradientElementGradientUnitsAttribute了解详情。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)