Lynn «Кофеман»

Надо использовать значение userSpaceOnUse для gradientUnits.

<linearGradient gradientUnits="userSpaceOnUse" ...>

Когда вы пишите

<svg class="inline-svg-icon" fill="url(#red-blue)"><use...>

по сути каждый элемент просто наследует этот атрибут fill. И по умолчанию градиент рисуется в границах элемента. Если же указать userSpaceOnUse, то градиент будет рисоваться в пределах текущего viewport.

https://codepen.io/alexeyten/pen/rNLQKbm?editors=1000

Вы забыли указать href. А в цветах у вас ошибка, пять нулей вместо шести.
Вот так всё работает

<svg viewBox="0 0 300 300" width="400">
  <circle id="circle" r="30" cx="150" cy="150" />
  
  <animate id="another" href="#circle"
           attributeName="r" 
           values="30;50;30"  
           repeatCount="indefinite"       
           dur="3s"/>
  <animate begin="another.begin" href="#circle"
           attributeName="fill"
           values="#000000;#ffe3e3;#000000"
           repeatCount="indefinite"
           dur="3s"/>
  <animate begin="another.begin" href="#circle"
           attributeName="cx"
           values="150;180;150"
           repeatCount="indefinite"
           dur="3s"/>
</svg>

Потому что маска по определению указывает только уровень прозрачности, а не цвет

Это защита браузеров https://developer.mozilla.org/en-US/docs/Web/SVG/S...

Ограничения
В целях безопасности, Gecko ограничивает некоторые возможности SVG когда он используется как картинка:

* Отключен JavaScript;
* Не загружаются внешние ресурсы (например картинки, стили), хотя их можно использовать, если добавить в виде data: URI
* […]

Firefox «честно» высчитывает дробные значения margin-ов, padding-ов и т.п. и применяет их при отрисовке SVG.

Обычно работает «хак»

svg {
  transform: translateZ(0);
}

https://jsfiddle.net/fdvn17o0/6/

У метода c должно быть 6 параметров (три пары чисел). У вас же после него идёт 8 чисел. 6 он использовал дальше по правилам SVG если не задан новый метод то используется тот же который был и ему не хватает параметров.

Т.е. у вас фактически написано ...c 0,0 0,0 20,-10 c 10,-20 — второму c не хватает параметров.

https://jsfiddle.net/jds2v568/3/
В IE не проверял.

Добавил preserveAspectRatio='none' и поменял background-size на 100% 100%

jsfiddle.net/qbshau80/4
Добавить transform: translateZ(0); в .link svg

В IE не проверял, но в FF помогает.

Насколько я понимаю, в FF при отрисовке SVG учитываются все родительские отступы, причём если они не в точности не попападают в пиксели, то в самих блоках это незаметно, но алгоритм сглаживания SVG это замечает. Например если у родителя отступ не ровно 5px, а, допустим 4.95px, то вы этого никогда не заметите, но SVG уже не будет чётко попадать в пиксели и будет «размытым».

transform форсирует округление границы картинки до пикселей и всё встаёт на свои места.