Как сделать интерактивный SVG?

Ответ 1

Я бы определенно посмотрел на RaphaelJS, который позволяет управлять SVG проще, чем делать это с помощью javascript с нуля. Есть несколько примеров того, как реализовать его с помощью событий. Однако вы можете манипулировать им с помощью javascript с помощью или без помощи любой из популярных фреймворков javascript. Дело в SVG заключается в том, что оно использует элементы, которые рассматриваются как часть DOM. Таким образом, изображение будет элементом с контейнером. Это полезно, поскольку вы можете поместить события click на те дочерние элементы.

Ответ 2

Взгляните на http://snapsvg.io/

На своем веб-сайте:

Snap был написан полностью с нуля автором Raphaël (Дмитрий Барановский) и разработан специально для современных браузеров (IE9 и выше, Safari, Chrome, Firefox и Opera). Ориентация на более современные браузеры означает, что Snap может поддерживать такие функции, как маскировка, обрезка, шаблоны, полные градиенты, группы и т.д.

Ответ 3

D3 - это библиотека JavaScript для управления SVG:

http://mbostock.github.com/d3/

Он также включает несколько вспомогательных методов для асинхронной загрузки данных (например, d3.json, d3.csv, d3.xml). В отличие от Raphaël, с D3 вы работаете напрямую с элементами SVG (или HTML, CSS).

Ответ 4

Ниже приведена небольшая часть из недавней онлайн-статьи Зака ​​Гросбарта, которая, как мне кажется, делает некоторые замечательные точки. Прочитайте все это, но особенно посмотрите раздел ОБЗОР...

Прежде чем рисовать что-либо в браузере, задайте себе три вопроса:

• Вам нужно поддерживать старые браузеры? Если да, то ваш единственный выбор - Рафаэль. Он обрабатывает браузеры вплоть до IE 7 и Firefox 3. Raphaël даже имеет некоторую поддержку IE 6, хотя некоторые из его основных технологий не могут быть реализованы там.

• Вам нужно поддерживать Android? Android не поддерживает SVG, поэтому вам придется использовать Paper.js или Processing.js. Некоторые слухи говорят, что Android 4 будет обрабатывать SVG, но большинство устройств Android не будут поддерживать его в течение многих лет.

• Является ли ваш рисунок интерактивным? Raphaël и Paper.js фокусируются на взаимодействии с нарисованными элементами посредством нажатия, перетаскивания и касания. Processing.js не поддерживает какие-либо события на уровне объекта, поэтому очень сложно ответить на жесты пользователя. Processing.js может нарисовать прохладную анимацию на вашей домашней странице, но другие инструменты лучше подходят для интерактивных приложений.

Ответ 5

Практически все манипуляции с .svg файлами выполняются с использованием JavaScript. AJAX - это просто что-то, что вы делаете с Javascript, поэтому, если вам нужно использовать это (для динамической загрузки нового контента или хранения взаимодействий) вам придется узнать об этом отдельно и применить его.

Я бы начал с изучения того, как рисовать вещи и как обрабатывать такие события, как "mouseOver" и "onClick".

Вот еще один учебник: http://www.carto.net/papers/svg/manipulating_svg_with_dom_ecmascript/

И вот один на AJAX: http://www.w3schools.com/ajax/ajax_example.asp

Ответ 6

Комплексный интерактивный пример:

http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2

предоставляет список функций для последней версии.

Работать в интерактивном режиме с текущими функциями и одновременно ссылаться на текущую документацию.

Ответ 7

@mitch Я бы порекомендовал вам чистый SVG... Я знаю, что это трудно использовать, но это дает вам обширные возможности манипуляции с JS. Для меня другие варианты, такие как библиотека Raphael, отлично подходят для простой работы, но если вам нужно настроить ваш код дальше, то нет ничего похожего на SVG. В противном случае вы можете оказаться в ситуации, когда вы складываете и не можете идти дальше.

Для Javascript/Ajax у вас есть конкретные библиотеки, которые могут сократить вашу кодировку, если приложение должно быть сложным... Что я могу сказать!?

Взгляните на: http://www.kevlindev.com/tutorials/index.htm

Ответ 8

Дайте лучнику - ценность управляемой графикой шанс. http://archer.graphics