Bug 35219 – SVG stroke gradients do not render on axis-aligned paths

• Status: RESOLVED
• Resolution: WONTFIX
• Component: SVG

[Mike Bostock]

Created attachment 49170 [details]
Test case with horizontal and vertical gradients.

When a linearGradient stroke is applied to a path or polyline element, the gradient will fail to render if the bounding box of the path has zero width or zero height. (Presumably, because a divide-by-zero occurs.) This is the case for axis-aligned paths and polylines, such as <path stroke="url(#gradient)" stroke-width="100" d="M0 50L300 50"/>.

According to the SVG specification: "When stroking is performed using a complex paint server, such as a gradient or a pattern, the stroke operation must be identical to the result that would have occurred if the geometric shape defined by the geometry of the current graphics element and its associated stroking properties were converted to an equivalent 'path' element and then filled using the given paint server."

Thus, the expected behavior is that the stroke gradient is rendered correctly, with the orientation is determined by the bounding box of that path's *stroke* (rather than its fill), such as <path fill="url(#gradient)" d="M0 0L0 100 300 100 300 0Z"/>. Instead, the actual behavior is that the path is stroked with opaque black.

Opera passes this test. Firefox produces the same (black) output as WebKit, and Batik renders white. A simple workaround is to offset one of the line coordinates, so the path is not axis-aligned, e.g., <path stroke="url(#gradient)" stroke-width="100" d="M0 49.999L300 50"/>.

[Mike Bostock]

Created attachment 49171 [details]
Expected behavior for gradient.svg.

Screenshot from Opera 9.64.

[Mike Bostock]

Created attachment 49172 [details]
Actual behavior for gradient.svg.

Screenshot from WebKit r54699.

[Dirk Schulze]

This is the correct behavior for SVG 1.1. See  http://www.w3.org/Graphics/SVG/Test/20061213/htmlObjectHarness/full-pservers-grad-17-b.html "Lines don't have a boundingbox, since they are one-dimensional, even though the stroke-width makes it look like they should have a boundingbox with non-zero width and height. "

Normaly the gradient should just be ignored (and therefore transparent). And this is the current behavior of Opera. Paradoxical we added the black stroke because of the previous behavior of Opera, see also bug 11017.

We won't change anything on the current behavior until SVG 1.1SE is finished or Firefox does the same like Opera.

[Mike Bostock]

Fascinating; seems like a contradiction, but thanks for explaining! From SVG 1.1, §7.11:

"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."

Switching to use gradientUnits="userSpaceOnUse" for lines is easy enough.