UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

Steps to reproduce the problem:
Create an SVG image – 

1. Draw a closed path object that does not have a square bounding box. Width is longer than height in this case.

2. Draw a rectangle that exactly matches the bounding rectangle of the closed path object.

3. Place the rectangle behind the closed path object and align the rectangle with the bounding rectangle of the path object.

4. Apply the same offset radial gradient to both objects, making sure that gradientUnits="objectBoundingBox" and gradientTransform =[identity matrix] (i.e. no transform).

See the attached .svg file.

What is the expected behavior?
The radial gradient should fill both the rectangle and the closed path elements (objects) exactly the same since the bounding rectangles of both objects are identical. Placing the path on top of the gradient, is should appear as though the radial gradient is seamlessly rendered across both objects.

What went wrong?
In Chrome (and any of the browsers derived from it, like Safari), it appears as though the bounding box of the path element is either not being calculated or applied correctly to the path object when filling the path with a radial gradient. This is being rendered correctly in Firefox, the Microsoft browsers and in Inkscape. Please see the attached image file that illustrates the difference. 

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 61.0.3163.100  Channel: stable
OS Version: 10.0
Flash Version: Shockwave Flash 27.0 r0

I'm developing a commercial vector drawing program for Windows 10 that uses SVG as it's native language. I ran across this issue when testing the SVG output of my app. I have attached a simple SVG file that can be viewed in any browser to demonstrate the problem. This is visible with any radial gradient where gradientUnits="objectBoundingBox" and the gradientTransform is the identity matrix (e.g. no transform applied to the gradient).

FYI:

The SVG 1.1 specification for radial gradients states, in respect to the ‘gradientsUnits’ property – 

“When gradientUnits="objectBoundingBox" and ‘gradientTransform’ is the identity matrix, then the rings of the radial gradient are circular with respect to the object bounding box space (i.e., the abstract coordinate system where (0,0) is at the top/left of the object bounding box and (1,1) is at the bottom/right of the object bounding box). When the object's bounding box is not square, the rings that are conceptually circular within object bounding box space will render as elliptical due to application of the non-uniform scaling transformation from bounding box space to user space.”

Source: https://www.w3.org/TR/SVG11/pservers.html#RadialGradients
 

Deleted: ChromeRadialGradientBug.svg 1.4 KB

ChromeRadialGradientBug.svg 1.4 KB Download

Deleted: CheomeRenderingErrorIllustrated.png 103 KB

	CheomeRenderingErrorIllustrated.png 103 KB View Download