как масштабировать и панорамировать документ SVG, встроенный в страницу XHTML, с помощью AMPLE SDK

Привет, я перерабатываю свою карту из растра в вектор.

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

но как я могу использовать эту библиотеку для масштабирования и панорамирования карты? я использую AMPLE SDK, потому что конвертер Raphael из SVG в Raphael не работает должным образом. КОНВЕРТЕР РАФАЭЛЯ


javascript svg vector-graphics raphael
person Mark Caso    schedule 14.05.2011    source источник

Ответы (2)


arrow_upward
4
arrow_downward

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

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

or

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

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

person Sergey Ilinsky    schedule 16.05.2011
comment
большое спасибо Сергей и эхо-поток, также я нашел это ie.microsoft .com/testdrive/Graphics/OrganizationChart/, который помогает мне с масштабированием и панорамированием, но у меня проблема с IE, загрузка Javascript занимает очень много времени, а также масштабирование и панорамирование ужасно медленные!! - person Mark Caso; 17.05.2011
comment
Уважаемый Сергей, у меня проблема с манипулированием viewBox, он отлично работает в chrome, Firefox, Opera, Safari, но не работает в IE??? это ошибка связана ли эта ошибка с этой ошибкой? nofollow noreferrer">groups.google.com/group/amplesdk/browse_thread/thread/ и как я могу исправить эту ошибку, чтобы заставить ее работать в IE, браузер IE неправильно реагирует на изменения ViewBox вместо масштабирования svg перемещается вправо и вниз !!!, как мне это исправить, это проблема только IE, в других браузерах проблем нет - person Mark Caso; 21.05.2011

arrow_upward
0
arrow_downward

Если 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 для выполнения анимированного масштабирования с помощью окна просмотра можно найти здесь: http://keith-wood.name/svg.html#anim

person jbeard4    schedule 14.05.2011