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

Answer 1

我不确定这是否能回答您的问题，因为您不清楚“[以与 HTML 类似的方式使用] SVG”是什么意思，但是有一个名为 Raphaël 的 JavaScript 库这使您可以以类似于使用 jQuery 的方式操作 SVG 图形用于操作 HTML 页面。这意味着您可以在页面上动态显示图像、附加事件处理程序、更改颜色或形状。 (好处是 Raphaël 在不支持 SVG 的 Internet Explorer 中使用 VML。)另一种方法是使用 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 和 Raphaël SVG Import Classic在 GitHub 上。