Почему в chrome svg не применяется градиент?

Question

[Максим]

Есть несколько изображений svg, необходимо применить к ним градиент. В FireFox все отлично работает и изображения заливаются градиентом, но в Chrome к некоторым svg градиент применяется частично или не применяется вообще. Вот, что получается (ко всем svg применен один и тот-же градиент):



То-же самое в FireFox:



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

Почему так происходит и как исправить?

Answer 1

[RAX7]

Похоже, что хром вычисляет размеры градиента в зависимости от размеров svg, где был определен этот градиент, а не от размеров, где он был использован. По умолчанию svg имеет размеры 300x150 и значение атрибута градиента y1="100%" вычисляется как y1="150px". Далее этот градиент применяется к svg с viewBox="0 0 10187 8873", в итоге градиент имеет высоту 150 единиц, а высота самого svg при этом 8873 единицы, от чего у иконки id='a' и появляется тонкая синяя полоска высотой ~1.7% (150/8873 * 100 = 1.69052%) . Для наглядности можно добавит градиенту атрибут spreadMethod="repeat", от этого некоторые иконки станут полосатыми.
Как исправить? Очевидный способ - не использовать значение атрибутов x1, x2, y1, y2 в процентах. Нужно подогнать все иконки под один размер viewBox, например 256x256 и для градиента задать атрибуты y1="256" x2="0"

Comments

[Odisseya]

Другой способ — «подогнать градиенты» под вьюпорт иконки: продублировать градиенты изменив им размер, например через gradientTransform — scale и соотнести каждый с соответствующей иконкой.

Еще один способ — объединить каждую иконку в одну фигуру (не через <g>, а юнионом в редакторе или clipPath'ом) и использовать дефолтный gradientUnits.