SVG开发里有个较为少见的问题。

对x1=x2或者y1=y2的直线（line以及path），比如：

 

如果，stroke里使用的是渐变效果，那么，在各种浏览器上都会出现同一个BUG，这条线消失了。

原因不好排查，但是道理很简单，参考：

Keyword objectBoundingBox should not be used when the geometry of the applicable element has no width or no height, such as the case of a horizontal or vertical line, even when the line has actual thickness when viewed due to having a non-zero stroke width since stroke width is ignored for bounding box calculations. When the geometry of the applicable element has no width or height and objectBoundingBox is specified, then the given effect (e.g., a gradient or a filter) will be ignored.

简而言之，就是说：

关键字objectBoundingBox这玩意儿，在元素没有宽度或者高度的时候，会失去作用。

 

linearGradient渐变又依赖这个属性，所以失效了。

解决方案很简单，为linearGradient加上属性gradientUnits="userSpaceOnUse"

gradientUnits是用于规定元素的坐标系统的，有两个属性userSpaceOnUse和objectBoundingBox，后者是默认的。

具体的说明参考：