SVG-путь к клипам не работает - несколько svgs на одной странице
У меня есть несколько svgs на одной странице, и я экспортировал их по отдельности из иллюстратора. Я также пропустил их через omgsvg, что уменьшило размер файла.
Однако, когда я просматриваю полную страницу со всеми моими отдельными вставленными svgs (через мой серверный механизм рендеринга html), кажется, что многие пути клипа не работают. Некоторые делают, а некоторые нет, я не могу понять, почему.
Свгомг помог, но не решил проблему полностью. Некоторые пути все еще не функционируют.
Но все пути клипа работают нормально, когда загружаются по одному в виде отдельных svgs непосредственно в chrome или в программе иллюстрации! Они только терпят неудачу, когда соединены в html-странице.
1 ответ
Причиной этой проблемы является то, что во время экспорта svg пути клипа будут определены с использованием стандартизированных идентификаторов, выбранных вашей программой иллюстрации. Если вы экспортируете несколько файлов, каждый из этих файлов может использовать одинаковые имена идентификаторов. Svgomg просто использует буквы, a,b... Illustrator использует SVGID_1_, ...
То, что вам нужно помнить, это роль идентификаторов на HTML-странице.
Идентификаторы должны быть уникальными. Пути к клипам не работают, потому что один и тот же идентификатор определен более одного раза при вставке нескольких отдельно экспортируемых файлов. Решение состоит в том, чтобы думать о вашей HTML-странице в целом и убедиться, что ваши идентификаторы на всех изображениях, которые вы будете иметь на странице, будут уникальными.