3

Добрый день, можно ли вернуть стандартный цвет иконки? Если svg закидываю через тег svg цвет отображается должным образом, но я пропихиваю иконку только через use, не кидаю ее в телом куском svg

mixin icon(name)
  svg(class="icon icon_" + name)&attributes(attributes)
    use(xlink:href=config.path.images + "/icons.svg#" + name)

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

Anton Essential
  • 1,043

1 Answers1

1

Как только вы используете команду use объект попадает в shadow DOM и стилизация иконки не работает. Для того, чтобы устранить эту проблему необходимо:

  1. Удалить в коде иконки все атрибуты стилизации у патчей, полигонов и т.д все инлайновые стили - fill, stroke
  2. Добавить в таблице стилей path{ fill:inherit; stroke:inherit; }
  3. Стилизацию иконок уже делать в таблице стилей на уровне классов иконок
  4. В шапку файлов иконок добавить строчку, указывающую на внешнюю таблицу стилей
    <?xml-stylesheet type="text/css" href="style.css"?>
    1. Файл таблицы стилей и файлы SVG лучше разместить в одной папке, так как браузеры чувствительны к этому, больше других chrome
Alexandr_TT
  • 110,146
  • 23
  • 114
  • 384
  • Но ведь если сделать fill: inherit, то вроде как и убирать атрибуты не нужно (1 пункт). – Sasha Omelchenko Apr 07 '17 at 13:47
  • @ Sasha Omelchenko инлайновые атрибуты имеют наивысший приоритет их не перешибить ничем, проверял :) Да и статьи имеются на этот счет - например той же Сары Сауендал – Alexandr_TT Apr 07 '17 at 13:50
  • https://jsfiddle.net/0yhLphd7/ ну вроде как работает даже с атрибутом ) или если свг в отдельный файл поместить, то перестанет? – Sasha Omelchenko Apr 07 '17 at 13:52
  • @ Да, автор же пишет, что использует иконки через use, чтобы не копировать куски svg А про высший приоритет инлайновых свойств это касается чисто svg файлов и таблиц стилей, что внутри файла и что во внешней таблице стилей, все они проигрывают стилям в патчах – Alexandr_TT Apr 07 '17 at 13:57
  • Поэтому и удалять нужно инлайновые стили svg и принудительно наследовать сверху кстати по этой же причине спрайты при варке удаляют инлайновые стили файлов svg – Alexandr_TT Apr 07 '17 at 13:59
  • @Sasha Omelchenko кстати в своем примере поменяй fill="orange" на style="fil:orange;" и увидешь, что ничем не перешибить оранжевый цвет, вот это и есть наивысший приоритет – Alexandr_TT Apr 07 '17 at 14:05
  • 1
    Ага, ну собственно мой вопрос был про атрибуты, так что вы правы. – Sasha Omelchenko Apr 07 '17 at 14:23
  • Скинте пожалуйста пример на фидл что бы при использовании use сохранился родной цвет иконки, без всяких заливок. – Anton Essential Apr 08 '17 at 09:38
  • @Anton Essential скинь коды своих иконок с ними пример сделаю – Alexandr_TT Apr 08 '17 at 15:00
  • @Alexandr_T Куда мне их скинуть? – Anton Essential Apr 09 '17 at 06:34
  • @Anton Essential так прямо в свой вопрос добавьте код иконки, обычно так и делают, если хотят получить конкретную помощь – Alexandr_TT Apr 09 '17 at 06:46
  • @Anton Essential вижу, что иконка сделана в incsape, но зачем у "id" русский текст. Иконка, как отдельный файл SVG не работает. Её надо переделывать - убирать русский текст, оптимизировать. Если хотите переделаю, но надо будет подождать. Посмотрите - аналогичный случай в соседнем топике - http://ru.stackoverflow.com/a/649996/28748 – Alexandr_TT Apr 09 '17 at 07:23
  • @Alexandr_T Спасибо, не не стоит, их там много иконок )) – Anton Essential Apr 09 '17 at 07:57