2

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

В общем, описал проблему и попытки решения. Может быть есть все-таки какое-то иное решение?

7
  • Вы всерьез полагаете, что все остальные, кто задает вопросы на этом ресурсе, делают это исключительно в священных научно-образовательных целях, и, боже упаси, ни в коем случае, не решают тут рабочие вопросы? 19 апр 2018 в 15:33
  • так вы всё уже придумали. Вставить в html посредством тега <object> svg файл с иконками соц. сетей. Но внутри svg обязательно нужно удалить атрибуты fill и stroke у иконок. А дальше раскрашивайте иконки с помощью JS в зависимости от расположения иконок. 19 апр 2018 в 15:48
  • В том-то и дело, что не работает. JS не видит, что находится внутри <object>, поскольку тег svg со всеми своими потомками находится не прямо в теге object, а внутри #document. Это что-то вроде iframe получается, и внутрь этого #document не попасть ни стилями, ни скриптами. А проверка на содержание object.contentDocument сообщает, что он пустой. В консоли выводится что внутри #document только <html><body></body></html> и всё. Но по факту-то это не так... 19 апр 2018 в 16:00
  • и правильно, JS не будет работать напрямую с <object>, но с иконками которые лежат внутри файла спрайта добавленными через 'object' и вызванными через <svg ....> <use xlink:href="#facebook" /> </svg> будет работать 19 апр 2018 в 16:09
  • Да, но это ведь не спрайт, в том-то и дело. Каждая иконка - отдельный svg-файл, содержание которого теоретически мне вообще неизвестно. Я ведь получаю в коде просто ссылку на файл в виде строки, например (wp-content/themes/some_theme/img/icons/facebook.svg), и потом эту строку присваиваю как атрибут data тега object. При таком раскладе я, получается, вообще не имею доступа к внутренностям svg, и даже не могу знать, прописаны ли там fill и stroke(( 19 апр 2018 в 16:18

1 ответ 1

2

Никаких танцев с бубном, всё до смешного просто:

$(this).load($(this).attr("data-icon"));

И не нужно никаких object, use и прочего!

1
  • Спасибо! Думаю, кто-нибудь уже запатентовал :) 20 апр 2018 в 8:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.