Инструмент SVG для рисования и отображения в Интернете

Question

Я ищу инструмент для рисования диаграммы SVG, и я хочу отобразить его на веб-странице.

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

ОК сначала я объясню свое требование прозрачным. Когда мы создадим прямоугольник с помощью любого инструмента SVG, он создаст элемент SVG с прямым элементом, в моем случае я бы хотел отличить два устройства: «тип устройства-1» и «тип устройства-2» (используя CSS в моем веб-приложении), но их форма прямоугольная.

Итак, я должен добавить дополнительную информацию для каждого прямоугольника в инструменте рисования, так что, используя Javascript, я мог бы понять тип устройства, в зависимости от типа устройства, я мог бы применять разные CSS для каждого прямоугольника.

Как это сделать? Любые инструменты рисования поддерживают эту функцию?

Answer 1

Одним из подходов для нас будет Adobe Illustrator для проектирования элементов и Raphael JS для отображения и анимации указанных элементов. Есть некоторые различия в том, как иллюстратор рисует векторную графику и как SVG делает так, что общий консенсус заключается в том, чтобы держать вас в графике относительно простой. Есть несколько руководств там, но это выглядит particuallry хорошо:

http://snugug.com/musings/illustrator-raphael-js-guide

Answer 2

Вы можете использовать http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html и определить идентификаторы, которые вы ссылаетесь позже в JavaScript