Illustrator / SVG到JavaScript工作流程？ （模板庫？）

Question

在Illustrator中“保存為SVG”時，這是典型的結果：

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="841.89px" height="595.28px" viewBox="0 0 841.89 595.28" style="enable-background:new 0 0 841.89 595.28;"
     xml:space="preserve">
<g id="symbol1" ... >
   <path ... />
   <path ... />
   <path ... />
</g>
</svg>

我想知道是否有任何類型的JavaScript模板庫（如小胡子，把手等）可以讓我以與HTML類似的方式使用SVG？
這樣我就可以保存一堆SVG元素模板並動態設置它們的樣式屬性和內容......

Answer 1

我不確定這是否能回答你的問題，因為你不清楚“以與HTML類似的方式使用SVG”是什么意思，但是有一個名為Raphaël的JavaScript庫可以讓你以一種方式操作SVG圖形類似於使用jQuery來操作HTML頁面。 這意味着您可以在頁面上動畫圖像，附加事件處理程序，更改顏色或形狀。 （獎勵是Raphaël在沒有SVG支持的情況下將VML用於Internet Explorer。）另一種方法是使用jQuery SVG插件或其他一些庫 。

當然SVG只是XML，它是一種文本格式，因此任何模板引擎都應該使用它，但使用Raphaël，jQuery SVG等的不同之處在於它們不會操縱底層XML格式的源文本，而是由此產生的DOM樹不僅意味着您可以在修改樹時實時查看結果，而且創建無效文檔要困難得多，如果您使用通常不了解XML的模板引擎操作XML源代碼，這很常見而是像對待任何文字一樣對待它。

我建議閱讀Illustrator到Raphael JS：A Guide並在GitHub上查看RaphaëlSVGImport插件和RaphaëlSVGImport Classic 。

Answer 2

根據https://groups.google.com/forum/#!topic/d3-js/qVZ7hacBGrE，您可以使用下划線模板。

該論壇還討論了另一種選擇：

1. 創建一個svg“defs”
2. 用“use”插入svg對象
3. 使用d3.js修改它
4. 讓它可見