Skip to content
This repository has been archived by the owner on Sep 12, 2023. It is now read-only.

Неуникальные id внутри svg-спрайта #208

Open
jt3k opened this issue Jul 27, 2017 · 3 comments
Open

Неуникальные id внутри svg-спрайта #208

jt3k opened this issue Jul 27, 2017 · 3 comments
Labels

Comments

@jt3k
Copy link
Contributor

jt3k commented Jul 27, 2017

Проблема

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

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

Решение

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

@dzhiriki
Copy link
Contributor

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

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

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

@jt3k
Copy link
Contributor Author

jt3k commented Jan 25, 2018

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

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

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

@dzhiriki
Copy link
Contributor

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

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

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

@dzhiriki dzhiriki reopened this Feb 12, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

2 participants