SVG:linearGradient渐变在直线上失效的问题解决方案

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

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

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

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

<a href="https://www.w3.org/TR/SVG11/coords.html#ObjectBoundingBox" target="_blank">www.w3.org</a>

简而言之，就是说：

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

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

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

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

具体的说明参考：

<a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/gradientUnits" target="_blank">gradientUnits MDN</a>