csssr-project-template

csssr-project-template copied to clipboard

Проблема

Часто внутри svg-спрайта попадаются неуникальные id. например кто-то называет свой градиент как id="a" а затем его использует как style="fill:url(#a);".

Если таких имён будет не одно, то возникает коллизия, и один из градиентов просто не отображается.

Решение

Предлагаю "зауникалить" айдишники внутри svg-спрайта добавив к ним префикс в виде имени исходного svg-файла. Это можно сделать например при помощи svgo. Ссылка на решение с svgo

Уникальные имена не помогут, т.к. #a резолвится будет в рамках текущей страницы. В то время как сам градиент объявлен внутри спрайта. Т.е. градиенты не работают сейчас вообще. Соответственно уникальные имена никак и не помогут.

Решение — это инлайнить спрайт целиком, тогда градиенты будут объявлены в рамках страницы и они работать будут. Но, если я правильно помню, градиенты объявленные в символах (т.е. svg>symbol>defs) всё равно не заработают. А значит defs нужно выносить в корень. Т.е. суммарно получаются довольно сильные переделки работы с иконками, причем свои минусы в этом тоже будут (например, проблемы с кешированием спрайта).

И учитывая, что иконки с градиентами требуются редко, то необходимости в внедрении такого решения мало. А так как активная разработка этого шаблона не ведется (Наши силы брошены на разработку Rispa.), то это внедрятся не будет..

Дык мне и нужно для встраивания в страницу. -- я использую эти спрайты в режиме полифилла -- это когда плагин вытягивает свг-файл xhr-запросом и вставляет в страницу.

Кажется проблема возникает когда на странице появляется два элемента с градиентами имеющими одинаковые айдишки.

Пример вот здесь https://widget.ruru.ru/partner?way=mobile&order_id=afb33c4d0e7d&service_id=19360&captcha=0&success_url=http%3A%2F%2Fkinohod.ru%2Forder%2Fafb33c4d0e7d%2Fprocess%2F&amount=350&failure_url=http%3A%2F%2Fkinohod.ru%2Forder%2Fafb33c4d0e7d%2Fprocess%2F&is_self_redirect=1&partner_id=1102

Сверху есть логотип билайна у которого градиент когда-то конфликтовал с градиентом карты мир ). Теперь не конфликтует т.к я починил сборку.

Давай всё-же починим и тут)?

я использую эти спрайты в режиме полифилла

Это конкретно у тебя так. А вообще не предполагалось такое использование повсеместно (svg4everybody только для старых IE подразумевался). С другой стороны, хуже (для тех кто не будет использовать svg4everybody для всех) от изменения айдишников в конфиге сборки не будет.

В общем, ишью открою. Если есть желание — будем рады ПРу. А свои силы брошены на Rispa.