SVG水平线设置渐变效果后水平线消失了

[cloudtian]

问题

两条水平线（一条通过line绘制，一条通过path绘制，设置渐变后均未显示出来）

解决

给linearGradient设置属性gradientUnits=userSpaceOnUse完美解决

MDN地址: linearGradient gradientUnits
gradientUnits 渐变单元，它描述了用来描述渐变的大小和方向的单元系统。取值有userSpaceOnUse | objectBoundingBox其默认值是objectBoundingBox。

objectBoundingBox: 表示属性的用户坐标系统是使用渐变应用到元素的边界框建立的，百分比值是相对于对象的边框的。（我们目前看到的效果都是这种系统下，它大体上定义了对象的渐变大小范围，所以只要指定从0到1的坐标值，渐变就会自动的缩放到对象相同大小）

而水平线或垂直线是没有高或宽的，所以失效

userSpaceOnUse: 表示属性代表了当前用户坐标系统的值。这些值是在引用梯度元素时将当前用户坐标系统置于适当的位置。百分比的值是相对于当前SVG视图。

userSpaceOnUse使用绝对单位，所以必须知道对象的位置，并将渐变放在同样地位置上。 如果使用的相对单位，则为相对于SVG视图的位置，元素在渐变方向时如果未占满SVG视图，就只是渐变过程中的一部分

效果对比

说明

渐变说明

• normal渐变：0-100%水平渐变，渐变单元为默认值objectBoundingBox。根据元素宽高决定水平方向梯度渐变。
• normal2渐变：0-100%平渐变，渐变单元为userSpaceOnUse。整个SVG水平方向梯度渐变。
• normal3渐变：60-210px水平渐变，渐变单元为userSpaceOnUse。从60-210px水平方向梯度渐变。

图形说明

• 第一条水平线line1渐变，使用normal渐变，由于水平线没有高度，所以未显示出来。

• 第二条水平线line2渐变，使用normal2渐变，由于宽度占满SVG宽度，所以渐变色可以全部显示出来。

• path1路径渐变，采用normal，基于元素边界渐变，可以显示渐变的整体效果。

• path2路径渐变，采用normal2，基于SVG整体渐变，当前图形只能显示渐变过程中的某一部分。（短path不太明显，下面使用矩形可以更明显的看出）

• 短矩形1，normal渐变。拥有整个渐变效果。

• 长矩形1，normal渐变。拥有整个渐变效果。

• 短水平线条1，normal2渐变。只显示当前图形在整个SVG渐变中的一部分。

• 短矩形2，normal2渐变。只显示当前图形在整个SVG渐变中的一部分。

• 长矩形2，normal2渐变。只显示当前图形在整个SVG渐变中的一部分，由于为宽度100%，所以拥有整个渐变效果。

• 短水平线条2，normal3渐变，当前图形和渐变用户坐标一致，所以拥有整个渐变效果。

• 短矩形3，normal3渐变，当前图形和渐变用户坐标一致，所以拥有整个渐变效果。