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

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

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

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

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

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


1 ответ

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

Решение:

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

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

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