обновлять SVG динамически

Question

У меня есть несколько объектов внутри svg, на которые пользователь может щелкнуть.

Есть ли способ: - отправить информацию об объекте (id), на который пользователь нажал, в «основной HTML-документ»?- нарисовать из внешнего документа в файле svg.

Возможно, мое описание неясно, ... Я хочу реализовать что-то вроде этого:

1. пользователь нажимает на любой объект внутриsvg-image;
2. основной документ получит идентификатор объекта, по которому щелкнули, и:
   • отобразит некоторую информацию об этом объекте;
   • нарисует дополнительный объект внутри svg-изображения.

Вопросы: как общаться из SVG в документ и из документа в SVG?

Большое спасибо, любые мысли приветствуются!

PS Возможно, SVG - не лучший способ сделать это?Что лучше тогда?

РЕДАКТИРОВАТЬ: Я видел рекомендации по использованию Рафаэля, .. но я хотел бы видеть «нативные» варианты.(Сейчас я анализирую реализацию Raphaels, чтобы увидеть это, но не думаю, что она делает именно то, что мне нужно).

Answer 1

См. в этом примере , чтобы узнать, как получить DOM ссылочного svg из родительского документа.

И вот пример того, как вы можете позвонить из SVG-файла в родительский документ.

SVG очень хорошо подходит для выполнения того, что вы описываете.

Answer 2

Я бы предложил использовать библиотеку типа Raphaël для поддержки вашего SVG-здания. Вы можете прикреплять события к объектам DOM, которые можно получить через свойство node компонента изображения.

Answer 3

Raphaël.js действительно хорошее решение, если вы хотите придерживаться SVG / VML.Теперь вы также можете использовать canvas (новая функциональность HTML 5).Canvas - это новый HTML-тег (который может иметь идентификатор, события и т. Д.), Который позволяет вам рисовать свободные фигуры, как это делает SVG.IE, конечно, не поддерживает холст изначально, и вам понадобится "excanvas.js" (тот или другой, но этот работает довольно хорошо ...), чтобы сделать его совместимым с IE.

Только одинЯ знаю об ограничении холста: использование фоновых изображений делает IE очень медленным.Я бы использовал Raphaël.js, если бы вы занялись этим.

Удачи

Answer 4

Никто не предлагал, но случайно обнаружил, что svg уже поддерживается jQuery!http://plugins.jquery.com/project/svg

Возможно, это не лучший подход, но я постараюсь работать с svg с помощью jquery.И на самом деле, это кажется разумным