svg inline

Fahrenheit140

11 марта 2017, 16:05

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

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

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

4 комментария

Авторизуйтесь, чтобы оставить комментарий

sameoldmadness

11 марта 2017, 16:07

Добрый день.

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

Fahrenheit140

12 марта 2017, 07:34

Добрый день!

По умолчанию блок имеет свои стили. Со своим 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 марта 2017, 07:35

sameoldmadness

12 марта 2017, 19:57

Fahrenheit140,

Спасибо за развёрнутый ответ.

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

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

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

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

Fahrenheit140

12 марта 2017, 20:11

sameoldmadness,

Подразумевал API на выбор - оба варианта. Спасибо. Если через атрибут data-bare сработает - то все ok.