SVG добавляет пробел между слоями

user1480951 спросил: 12 мая 2018 в 03:38 в: svg

У меня есть файл jpg, который мне нужно превратить в отзывчивую карту изображения. Я пытаюсь сделать это, преобразовывая его в SVG.

В фотошопе я вырезал каждую связываемую область и вставлял ее в качестве нового слоя. Затем я открыл файл psd в Illustrator, добавил ссылки на панель атрибутов различных слоев, а затем экспортировал его в SVG.

В Illustrator файл выглядит нормально. Однако, когда я открываю SVG-файл в браузере, кликабельные слои не выстраиваются в линию и не создают пробелы.

Как правильно экспортировать это изображение, чтобы все слои выстроились в порядок.

svg adobe-illustrator

Paul LeBeau ответил: 12 мая 2018 в 04:24

Трудно определить, что не так с воображаемым SVG. Создайте Минимальный, полный и проверенный пример . Но в любом случае вам не нужно резать свой образ. Просто поместите свой JPEG в SVG. Затем добавьте некоторые прозрачные фигуры (например, прямоугольники), где вы хотите, чтобы были ссылки.

user1480951 ответил: 12 мая 2018 в 05:17

Я попытался загрузить файл .ai, чтобы показать, как он выглядит, но он не позволит эти типы файлов. Я попытался просто поместить прозрачные прямоугольники над jpg и сохранить его как SVG. Это сработало. Мне просто нужно было добавить, чтобы изменить экспортированный стиль CSS для прямоугольников из заливки: none для заполнения: прозрачный. Кажется, работает. Огромное спасибо.

1 ответ

user1480951 ответил: 12 мая 2018 в 06:06

Решение:

Вставить jpg в файл .ai.
Созданы прозрачные прямоугольники, в которых я хотел, чтобы ссылки были.
Были созданы прямоугольники на отдельных слоях.
В панели атрибутов для каждого прямоугольника я устанавливаю карту изображения в прямоугольник / многоугольник и добавляю соответствующий URL-адрес.
Щелкните файл - > Сохранить как - > SVG для экспорта в виде файла svg с кодом.

Изначально области с интерактивным доступом по-прежнему не работают. Чтобы решить эту проблему, в коде svg я изменил fill: none, чтобы заполнить: transparent.

Я также экспериментировал с fill:#hexcolor и fill-opacity:0.3, чтобы области с кликами где видно.