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 до конца fill: url(#...) атрибут CSS. Я попытался удалить none ключевое слово с Firebug, но Firebug просто удаляет весь атрибут. Почему это происходит?

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

19
css fill firefox gradient svg

3 ответов

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

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

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

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

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

37

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

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

решение

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

динамический способ 

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

статическим способом

fill="url(#gradient-id)"

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

7

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

0