在 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、Handbars 等)允许我以与 HTML 类似的方式使用 SVG?
这将允许我保存一堆 SVG 元素模板并动态设置它们的样式属性和内容......
我不确定这是否能回答您的问题,因为不清楚“以与 HTML 类似的方式使用 SVG”是什么意思,但有一个名为Raphaël http://raphaeljs.com/允许您以类似于使用的方式操作 SVG 图形jQuery http://jquery.com/用于操作 HTML 页面。这意味着您可以在页面上对图像进行动画处理、附加事件处理程序、更改颜色或形状。 (额外的好处是拉斐尔使用VML http://en.wikipedia.org/wiki/Vector_Markup_Language对于不支持 SVG 的 Internet Explorer。)另一种方法是使用jQuery SVG http://keith-wood.name/svgRef.html插件或其他一些图书馆 http://www.farinspace.com/top-svg-javascript-libraries-worth-looking-at/.
当然,SVG 只是 XML,它是一种文本格式,因此任何模板引擎都应该使用它,但使用 Raphaël、jQuery SVG 等的区别在于,它们不操作底层 XML 格式的源文本,而是操作生成的结果。DOM tree http://www.w3.org/TR/DOM-Level-2-Core/introduction.html这不仅意味着您可以在修改树时实时看到结果,而且还意味着创建无效文档要困难得多,如果您使用通常不理解 XML 而是相反的模板引擎来操作 XML 源代码,则这种情况很常见。像对待任何文本一样对待它。
我推荐阅读Raphael JS 插画:指南 http://snug.ug/musings/illustrator-to-raphael-js-guide并看到两者Raphaël SVG 导入插件 https://github.com/wout/raphael-svg-import/#readme
and Raphaël SVG 导入经典 https://github.com/crccheck/raphael-svg-import-classic#readme在 GitHub 上。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)