在網頁中繪製和顯示SVG工具

Question

我正在尋找繪製SVG圖表的工具，並且希望在網頁中顯示相同內容。

有很多工具可以創建SVG圖，但是我正在尋找爲每個圖形添加一些額外字段的工具。

好的，首先我會解釋清楚我的要求。當我們使用任何SVG工具創建一個矩形時，它將創建一個帶有矩形元素的SVG元素，在我的情況下，我想區分「設備類型1」和「設備類型2」兩個設備（在我的Web應用程序中使用CSS ）但它們的形狀是矩形的。

因此，我必須爲繪圖工具中的每個矩形添加一些附加信息，以便使用Javascript我可以瞭解設備的類型，根據設備類型我可以爲每個矩形應用不同的CSS。

如何做到這一點？任何繪圖工具都支持這種功能？

Answer 1

一種方法是我們Adobe Illustrator設計你的元素和Raphael JS來顯示和動畫元素。 Illustrator繪製矢量圖形的方式和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