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>