Как мне масштабировать и панорамировать SVG-документ для встраивания в XHTML-страницу с помощью AMPLE SDK - PullRequest
Новая
       34

Как мне масштабировать и панорамировать SVG-документ для встраивания в XHTML-страницу с помощью AMPLE SDK

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

Здравствуйте, я разрабатываю свою карту из растра в вектор.

Мне удалось встроить файл карты SVG на страницу XHTML, и я использую библиотеку AMPLE SDK, она отлично работает во всех браузерах.

но как я могу использовать эту библиотеку для масштабирования и перемещения по карте?Я использую AMPLE SDK, потому что Raphael Converter от SVG To Raphael не работает должным образом. РАФАИЛЬНЫЙ ПРЕОБРАЗОВАТЕЛЬ

Ответы [ 2 ]

3 голосов
/ 17 мая 2011

Вы можете реализовать масштабирование и панорамирование фрагмента SVG, манипулируя атрибутом viewBox элемента svg в соответствии с предложенным эхо-потоком.Однако вы должны использовать setAttribute, чтобы получить отраженное изменение: 

ample.getElementById("mysvg").setAttribute("viewBox", "500 500 1000 1000");

или 

ample.query("#mysvg").attr("viewBox", "500 500 1000 1000");

Изучите формат атрибута viewBox, и вам не составит труда выяснить, как это должно бытьманипулируют.

0 голосов
/ 14 мая 2011

Если Ample SDK поддерживает динамический SVG (и, похоже, так и есть), вы можете добавить эту функцию, написав сценарий свойства viewbox корневого элемента SVG в ответ на события мыши. Например. 


var newX = 100;
var svg = document.documentElement;
svg.viewBox.baseVal.x = newX;

Вам все еще нужно подключить этот код для ответа на события мыши.

Если вам нужна поддержка библиотеки, вы можете изучить использование библиотеки jQuery SVG (хотя, опять же, я не уверен, насколько хорошо это будет работать с Ample): http://keith -wood.name / svg. HTML

Демонстрация jquery SVG, используемой для выполнения анимированного масштабирования с использованием viewbox, можно найти здесь: http://keith -wood.name / svg.html # anim

...