Добрый день. Ситуация в следующем - делаем сайт на wordpress, где будет присутствовать список ссылок на аккаунты в соцсетях. С иконками этих самых соцсетей.
Требование заказчика - чтобы в админке можно было загружать иконки в виде svg-файлов. Этот список выводится на страницу в нескольких местах, и по дизайну в одном месте эти иконки белого цвета, в другом - черного. Более того - они должны менять цвет при наведении.
Поскольку загружаются они из админки, отдельными файлами, ни о каком спрайте речь не идет. Также, поскольку загружаются они единожды в одном месте - о нескольких документах с отличающимся fill
речь тоже не идет. Грубо говоря, мы имеем, например, иконку фейсбука, которая в зависимости от расположения на сайте должна быть черной либо белой, а также менять при наведении цвет - ну, скажем, на красный. И файл иконки должен быть один единственный.
Чтобы были возможны манипуляции с fill
, stroke
и т.д., иконку необходимо вставить именно как svg-документ. Но я заранее не знаю, с каким именно документом придется иметь дело, поэтому максимум, что я смог придумать - это в php выводить ссылку на загруженный svg-документ в атрибут блока data-icon
, а потом в js написать код, который проходится циклом по этим блокам, выдергивает строку из data-icon
и формирует svg таким образом:
$(this).append('<object type="image/svg+xml" data="' + $(this).attr("data-icon") + '" class="icon"></object>');
И все бы ничего, но , поскольку встраивание элемента атрибута data
это что-то вроде iframe
- то обратиться в стилях к svg невозможно. Вставка через svg use
тоже не работает, т.к. просто напрямую обратиться к файлу нельзя, нужно прописать id
конкретного элемента внутри файла. А одному богу известно, какие там в дальнейшем файлы будет загружать заказчик.
В общем, описал проблему и попытки решения. Может быть есть все-таки какое-то иное решение?
html
посредством тега<object>
svg файл с иконками соц. сетей. Но внутри svg обязательно нужно удалить атрибутыfill
иstroke
у иконок. А дальше раскрашивайте иконки с помощью JS в зависимости от расположения иконок.JS
не будет работать напрямую с <object>, но с иконками которые лежат внутри файла спрайта добавленными через 'object' и вызванными через <svg ....> <use xlink:href="#facebook" /> </svg> будет работать