4

在 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 元素模板并动态设置它们的样式属性和内容......

4

2 回答 2

0

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

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

我推荐阅读Illustrator to Raphael JS: A Guide并在 GitHub 上查看 Raphaël SVG Import 插件 和Raphaël SVG Import Classic 。

于 2012-07-24T08:54:08.473 回答
0

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

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

  1. 创建一个svg“defs”
  2. 使用“使用”插入 svg 对象
  3. 使用d3.js修改它
  4. 让它可见
于 2013-08-20T22:43:51.503 回答