Illustrator/SVG 到 JavaScript 工作流程？（模板库？）答案

【问题标题】：Illustrator/SVG to JavaScript workflow? (A templating library?)Illustrator/SVG 到 JavaScript 工作流程？（模板库？）
【发布时间】：2011-12-11 18:00:42
【问题描述】：

在 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 模板库（如 mustache、handlebars 等）可以让我以与 HTML 类似的方式使用 SVG？
这可以让我保存一堆 SVG 元素模板并动态设置它们的样式属性和内容...

【问题讨论】：

SVG 使用 mustache 的主要问题是什么？看起来工作正常。

标签： javascript svg templating adobe-illustrator client-side-templating

【解决方案1】：

我不确定这是否能回答您的问题，因为不清楚“以与 HTML 类似的方式 [使用] SVG”是什么意思，但有一个名为 Raphaël 的 JavaScript 库可让您操作 SVG 图形以类似于使用jQuery 处理HTML 页面的方式。这意味着您可以在页面上为图像设置动画、附加事件处理程序、更改颜色或形状。（好处是 Raphaël 使用 VML 用于不支持 SVG 的 Internet Explorer。）另一种方法是使用 jQuery SVG 插件或 some other libraries。

当然 SVG 只是 XML，它是一种文本格式，因此任何模板引擎都应该使用它，但是使用 Raphaël、jQuery SVG 等的不同之处在于它们不操纵底层 XML 格式的源文本，但是生成的DOM tree 这不仅意味着您可以在修改树时实时查看结果，而且如果您使用不支持的模板引擎来操作 XML 源代码，那么创建无效文档会变得非常困难。通常理解 XML，但将其视为任何文本。

我建议阅读Illustrator to Raphael JS: A Guide 并同时查看Raphaël SVG Import plugin 和 GitHub 上的 Raphaël SVG Import Classic。

【讨论】：

【解决方案2】：

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

论坛还讨论了另一种选择：

创建一个 svg “defs”
使用“使用”插入 svg 对象
使用d3.js修改它
使其可见

【讨论】：