Карта изображения для навигации по документу SVG - PullRequest
Новая
       20

Карта изображения для навигации по документу SVG

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

У меня огромный документ SVG, и я хотел бы иметь возможность быстро перемещаться по этому документу, используя сопровождающее миниатюру изображения, как карту изображений с интерактивными областями. Мне нравится Палитра Photoshop's Navigator (спасибо Phrogz)

Проблема в том, что я понятия не имею, как перемещаться по документу SVG ...

Я думал об использовании именованных тегов <g> в моем документе SVG, которые будут связью между изображением и SVG. Нечто подобное.

Есть идеи?

1 Ответ

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

Есть множество способов сделать это. Вот что я бы сделал:

  1. Поместите содержимое SVG в элемент <svg> вашего документа.

  2. Нарисуйте прямоугольник над миниатюрой (который можно растеризовать, если в вашем SVG-файле много данных, а его уменьшение в масштабе приводит к снижению производительности).

  3. Использование JavaScript для обнаружения щелчков / перетаскиваний в миниатюре и перемещения прямоугольника над ним.

  4. В зависимости от соотношения расположения прямоугольника по отношению к миниатюре, отрегулируйте атрибут viewBox содержимого SVG.

На самом деле, если бы это был я, я бы вставил мой SVG в XHTML и использовал бы один SVG-документ для содержимого и другой SVG-документ для палитры миниатюр, или даже просто изображение HTML и границу. div для миниатюры.

...