SVG "fill: url (#....)" ведет себя странно в Firefox

У меня есть следующий рисунок SVG:

<svg width='36' height='30'>
  <defs>
    <linearGradient id="normal-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(81,82,84); stop-opacity:.4"/>
      <stop offset="100%" style="stop-color:rgb(81,82,84); stop-opacity:1"/>
    </linearGradient>
    <linearGradient id="rollover-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(0,105,23); stop-opacity:.5"/>
      <stop offset="100%" style="stop-color:rgb(0,105,23); stop-opacity:1"/>
    </linearGradient>
    <linearGradient id="active-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(0,0,0); stop-opacity:.4"/>
      <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:1"/>
    </linearGradient>
  </defs>

  <text x="8" y="25" style="font-size: 29px;" font-family="Arial">hello world</text>
</svg>'

Я устанавливаю атрибут fill элемента text через CSS и переключаюсь между различными градиентами в зависимости от состояния зависания. Это отлично работает в Chrome и Safari, но в Firefox текст не отображается. После проверки элемента я обнаружил, что Firefox добавляет none в конец моего атрибута CSS fill: url(#...). Я попытался удалить ключевое слово none с помощью Firebug, но Firebug просто удалит весь атрибут. Почему это происходит?

EDIT: Я должен отметить, что если я удалю CSS, который устанавливает свойство fill, а hardcode - атрибут fill в элемент text (не через встроенный атрибут style), текст отображается правильно во всех браузерах.

Ответ 1

Выяснил это. В моем CSS я имел в виду градиенты так же, как я изначально ссылался на заливку inline:

#myselector {
    fill: url('#gradient-id');
}

Чтобы заставить его работать в Firefox, мне пришлось изменить его на это:

#myselector {
    fill: url('/#gradient-id');
}

Не знаю, почему это так. Может быть, это имеет какое-то отношение к структуре каталогов, содержащей мою таблицу стилей?

Ответ 2

SVG "fill: url (#...)" ведут себя странно в Firefox, когда мы присваиваем код css (как внешний, так и внутренний css.)

#myselector {
fill: url('#gradient-id');
}

Решение

дать встроенный стиль, это можно сделать двумя способами. Статический или динамический путь

Динамический путь

.attr('fill', 'url(#gradient-id)')

Статический путь

fill="url(#gradient-id)"

В статике вы должны поместить это в SVG Html;

Ответ 3

У меня была такая же проблема с linearGradient в SVG - еще в 2017 году. Я думаю, проблема в том, что Firefox относится к url('#gradient-id') как обычный URL и применяет правила метатега <base href=""/>. Прокомментируйте это и проверьте.