Клуб пользователей блока «Поделиться»

svg inline

Fahrenheit140
11 марта, 16:05

Добрый вечер.

Пожалуйста добавьте возможность обращаться к иконкам svg inline . Для того, что-бы управлять цветом иконок.

Тема пришла с БЭМ-форума - ссылка на пост , еще немного по теме - о реализации спрайтов

4 комментария
Подписаться на комментарии к посту
sameoldmadness
11 марта, 16:06
Добрый день.


Пока не очень понимаю, о чём речь. Можете привести пример кода и пояснить, зачем это нужно?
Добрый день!


По умолчанию блок имеет свои стили. Со своим background, цветом, border-radius и т.д. Кроме этого в svg есть path, у него назначен цвет #fff.


background переопределить получилось. пример - http://cb19714.tmweb.ru/card.html - блок поделиться ссылкой в  футере, иконкам назначен background какой и ожидалось, даже с состоянием :hover.



Но цвет fill не переопределяется, так как в сервисе Блок"Поделиться" сама svg передается как background-url. То есть извне на стили svg повлиять не возможно.


Для чего это нужно? Ответ: требуется стилизовать (изменять цвет) в svg, а именно fill. Пример ожидаемого результата http://1.pechenki.com.ua/62/card.html - блок поделиться ссылкой в  футере.


Если сравнить оба примера, то в блоке предоставленном вами цвет самой иконки #fff (пример 1), ожидаемый цвет иконки #0d1b21 (пример 2)


По этой причине есть необходимость передавать иконки inline, то есть передавать иконку не как background для span, а передавать весь код svg в html
Обновлено 12 марта, 07:35
sameoldmadness
12 марта, 19:57
Fahrenheit140,
Спасибо за развёрнутый ответ.


Мы рассматривали такой вариант вёрстки, но решили от него отказаться. Причина в том, что блок можно инициализировать без CSS, указав атрибут data-bare. В этом случае у пользователя появляется возможность стилизовать блок так, как ему угодно – задать свои размеры и отступы, указать свои иконки.


Если мы начнём класть иконки прямо в html, это изменение поломает вёрстку всем пользователям блока, использующим этот атрибут.


Другой аргумент в пользу текущей организации – мы не можем гарантировать, что разметка иконок не изменится при очередном обновлении блока. Это может привести к тому что у пользователей, переопределяющих цвета заливки, иконки начнут вести себя непредсказуемым образом.


Поэтому мы считаем, что правильный путь решения данной задачи – скопировать стили блока (и иконки) себе, указать атрибут data-bare, и переопределить стили так, как того требует дизайн вашей страницы.
sameoldmadness,
Подразумевал API  на выбор  - оба варианта. Спасибо. Если через атрибут data-bare сработает - то все ok.