Solving the invisible issue when applying gradient on a straight SVG line path

[ajhsu]

Reason

The property gradientUnits can be assigned with following values: gradientUnits = "userSpaceOnUse | objectBoundingBox"

And the difference between was quite simple:

• objectBoundingBox: Gradient will be filled within target object area only.
• userSpaceOnUse: Gradient will be filled within the entire SVG area instead.

(See http://www.oxxostudio.tw/articles/201409/svg-25-gradients-patterns.html to learn more about SVG coordination system.)

But the 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.

Reference

• https://stackoverflow.com/questions/21638169/svg-line-with-gradient-stroke-wont-display-straight
• http://www.oxxostudio.tw/articles/201409/svg-25-gradients-patterns.html