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

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

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

<path d="M200,10 200,100" stroke="url(#orange_red)"/>

 

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

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

www.w3.org

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，后者是默认的。

具体的说明参考：

gradientUnits MDN