Могу ли я как-то конвертировать SVG-изображение Пути в координаты Imagemap? - PullRequest
Новая
       35

Могу ли я как-то конвертировать SVG-изображение Пути в координаты Imagemap?

4 голосов
/ 31 мая 2011

Могу ли я преобразовать SVG-изображение Пути к координатам Imagemap как-нибудь!?давайте предположим, что у меня есть это изображение SVG
http://www.openclipart.org/people/ArtFavor/anatomy26.svg
я хочу как-то преобразовать пути в SVG в координаты Imagemap, чтобы я мог создать на нем эффект / скрипт http://www.netzgesta.de/mapper/ !!
Это означает, что я хочу сделать эффект выделения, когда переворачиваю определенную часть этой анатомии (сценарий, который нужно использовать, не обязательно должен быть "картографическим", но я просто привожу его в качестве примера)

Ответы [ 3 ]

1 голос
/ 24 марта 2017

Самый точный способ преобразования векторной / SVG-графики - открыть векторный / EPS-файл в Adobe Illustrator (я использовал Adobe Illustrator CC 2017).

Выделите путь и вАтрибуты (в главном меню, «Окно»> «Атрибуты») устанавливают в поле «Карта изображения» желаемую форму.Если вы строите карту изображения для буквальной карты, выберите «Многоугольник».При желании вы также можете установить поле «URL».

После того, как вы пройдете по каждой фигуре и назначите соответствующие атрибуты, перейдите в главное меню, Файл> Экспорт> Сохранить для Web (устаревшая версия).Затем нажмите «Предварительный просмотр» в левом нижнем углу, и это откроет окно в браузере.При предварительном просмотре вы можете просмотреть HTML-код карты под изображением.

ПРИМЕЧАНИЕ: ваши векторные / SVG фигуры должны быть путями.Поэтому вам, возможно, придется освободить составные пути (щелкнув правой кнопкой мыши выделенную фигуру и выбрав «Освободить составной путь».

Не очень интуитивно, как выяснить в Adobe, но, безусловно, самый точный способ, который я понялкак это сделать.

1 голос
/ 31 мая 2011

Вам может быть интересен этот скрипт: creation-an-image-map-from-svg

0 голосов
/ 03 апреля 2012

Я нашел это очень многообещающее руководство. Он использует программу под названием Mapedit и Sea Monkey, обе из которых, я считаю, бесплатны. http://socrtwo.info/image_map.htm

Edit:

Простой способ сделать то же самое -

  1. Сохраните изображение в формате PNG с помощью Inkscape
  2. Открыть в Gimp, добавить альфа-канал, удалить любые пробелы, которые должно быть ясно
  3. Магия: используйте image-maps.com, чтобы нанести на карту свое изображение, а затем сделайте это div с непрозрачностью около 0,1, поместите div точно под сопоставленное изображение с таким же изображением.

Любые выделенные области могут быть вырезаны из исходного SVG, сохранены в формате PNG и помещены между div для ролловеров и еще много чего. (Таким образом, я делал карты мира со светящимися странами, и это работало немного лучше, чем ожидалось.

...