Добрый день. Ситуация в следующем - делаем сайт на 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 как object способ стилизации через javascript - тоже не работает (статья написана в 2015 и, возможно, браузеры опять поменяли какую-нибудь политику безопасности, черт его знает).
Вставка через svg use тоже не работает, т.к. просто напрямую обратиться к файлу нельзя, нужно прописать id конкретного элемента внутри файла. А одному богу известно, какие там в дальнейшем файлы будет загружать заказчик.
В общем, описал проблему и попытки решения. Может быть есть все-таки какое-то иное решение?
