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

Как вы создаете интерактивный SVG? Кто-нибудь знает, где найти учебники? Мне бы очень хотелось получить хороший список ресурсов последние, чтобы помочь каждому изучать динамическую и интерактивную графику с помощью SVG.

Примером "интерактивности", которую я ищу, является предоставление обработчиков событий SVG и предоставление пользователю возможности отправлять или получать новые данные через графику (AJAX).

Все книги по SVG - с 2008 года или раньше, поэтому нет современных методов (jQuery или AJAX). Все сообщения по сценарию SVG на Stackoverflow относятся к 2010 году, и большинство из них также относятся к 2008 году.

Текущие ресурсы для SVG:

Raphael

Рафаэль кажется широко распространенной библиотекой для работы с SVG. Кажется, он обеспечивает хорошие функции высокого уровня.

Учебник для Рафаэля

Старый пост SO на страницах SVG, все комментарии с 2008 года

w3schools Учебник 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