Как правильно вставить и стилизовать svg в данном случае?

Добрый день. Ситуация в следующем - делаем сайт на 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 конкретного элемента внутри файла. А одному богу известно, какие там в дальнейшем файлы будет загружать заказчик.

В общем, описал проблему и попытки решения. Может быть есть все-таки какое-то иное решение?
  • Вопрос задан
  • 167 просмотров
Решения вопроса 1
@SergeiB
Вставить svg можно при помощи JQuery-метода load:
$('.your-svg-container').load('your-svg-file.svg');
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы