Why doesn't gradient apply in chrome svg?

Question

Google Chrome

There are several svg images, you need to apply a gradient to them. In FireFox, everything works fine and images are filled with a gradient, but in Chrome, some svg are partially or not applied at all. Here's what happens (the same gradient is applied to all svgs):



Same thing in FireFox:



https://codepen.io/mavsan/pen/GRqPPop?editors=1000

Why is this happening and how to fix it?

Answer 1

It looks like chrome calculates the dimensions of the gradient based on the dimensions of the svg where the gradient was defined, not the dimensions where it was used. The default svg is 300x150 and the value of the gradient attribute is y1="100%"calculated as y1="150px". Next, this gradient is applied to svg with viewBox="0 0 10187 8873", as a result, the gradient has a height of 150 units, and the height of the svg itself is 8873 units, which is why the icon has id='a'a thin blue strip ~1.7% high (150/8873 * 100 = 1.69052%) . For clarity, you can add the spreadMethod="repeat" attribute to the gradient, which will cause some icons to become striped.
How to fix?The obvious way is not to use the value of the x1, x2, y1, y2 attributes as a percentage. You need to fit all the icons to the same viewBox size, for example 256x256 and set attributes for the gradienty1="256" x2="0"