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

Question

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

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

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

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

Answer 1

Решение:

1. Вставить jpg в файл .ai.
2. Созданы прозрачные прямоугольники, где я хотел, чтобы ссылки были.
3. Прямоугольники были созданы на отдельных слоях.
4. На панели атрибутов для каждого прямоугольника я установил карту изображения в прямоугольник / многоугольник и добавил соответствующий URL.
5. Щелкните Файл -> Сохранить как -> SVG, чтобы экспортировать как файл SVG сcode.

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

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