Illustrator/SVG 到 JavaScript 的工作流程? (模板库?)

2023-12-25

在 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(使用前将#替换为@)

Illustrator/SVG 到 JavaScript 的工作流程? (模板库?) 的相关文章

随机推荐

  • 使用 RxJava 处理分页

    我在 Android 应用程序上使用 Retrofit RxJava 并询问自己如何处理 API 分页以链接调用 直到检索到所有数据 是这样的吗 Observable
  • Xcode 中是否支持 git rebasing?

    Can one rebase在 Xcode 中将一个分支的更改集成到另一个分支 我知道 Xcode 支持合并 但我找不到任何用于变基的东西 它没有 因为它试图提供对正在使用的版本控制系统的抽象 如果想要 git 的 Mac GUI 你可以使
  • Android ViewFlipper + 手势检测器

    我正在使用手势检测器来捕获 flings 并在发生这种情况时使用视图翻转器来更改屏幕 我的一些子视图包含列表视图 如果您在列表视图上滑动 手势检测器将无法识别滑动 但如果它位于 TextView 或 ImageView 的顶部 它会识别它
  • 目标文件中的符号表和重定位表

    据我了解 目标文件中的指令和数据都有地址 第一个数据项从地址 0 开始 第一条指令也从地址 0 开始 重定位表包含有关在文件中的地址发生变化时需要更新的指令的信息 例如 如果文件与另一个文件链接在一起 在下面的示例中 A 行将位于重定位表中
  • 如何将文本字符串发送到服务?

    我有一个桌面应用程序和一项服务 如何将字符串从桌面应用程序发送到我的服务并在服务中处理它 我不想使用套接字 因为它可能被 Windows 防火墙阻止 如果您不想使用网络传输 那么执行跨会话 IPC 的最简单方法可能是使用命名管道 需要注意的
  • 有没有一个工具可以自动将make文件转换为sln/vcproj?

    Google 展示了许多用于获取 Visual Studio 格式 sln vcproj 文件并从中生成 make 文件的工具 但我找不到解决相反问题的文件 我有一个引用数百个 c 和 h 文件的 make 文件 并且 为了方便 调试 在
  • Ruby on Rails - 在特定日期时间自动触发事件

    我想触发一个事件 特别是在特定日期时间 这是我的模型之一中的一列 发送一封电子邮件并更新某些模型的属性 我已经四处搜寻 但还没有真正找到任何解决方案 有什么办法可以实现这一点吗 您可以将排队解决方案与调度程序一起使用 排队解决方案 Resq
  • 用 NA 填充时间序列中缺失的月份[重复]

    这个问题在这里已经有答案了 我有数据集 年月数字 2002 01 2 392909 2002 02 2 496800 2002 03 2 341897 2002 04 1 665625 2002 05 2 398261 2003 01 1
  • Chrome 扩展:异步查询选项卡

    我有两个变量被设置为函数的 返回值 这些函数是获取选项卡的 URL 和对实际选项卡对象的引用 并将它们存储在变量中 我有一些代码 function init var url getUrl var tab getTab function ge
  • 提取标签之间的字母

    谁能指导我如何提取标签之间的单词 例如 hello in C 我猜他是想在之间说一句话tags 您应该使用正则表达式来实现相同的目的
  • c#:如何确定可滚动控件的 ScrollBar 当前是否显示?

    有没有办法让我检查控件的滚动条当前是否显示 我想使用它 这样我就可以确定如何调整 Scrollable 控件的子级的大小 这在某种程度上取决于 ScrollBar 是否显示 Scrollable 控件可以动态调整大小 对于具有 AutoSc
  • 如何在 Swift 中传递具有关联类型(通用协议)的协议作为参数?

    我必须将接口作为参数传递给函数 接口是通用的 也称为具有关联的类型 我找不到一个好的方法来做到这一点 这是我的代码 protocol IObserver class typealias DelegateT class Observer IO
  • Ninject:单例绑定语法?

    我正在将 Ninject 2 0 用于 Net 3 5 框架 我在单例绑定方面遇到困难 我有课UserInputReader它实现了IInputReader 我只希望创建该类的一个实例 public class MasterEngineMo
  • 按可以为 None 的属性对列表进行排序

    我正在尝试使用对对象列表进行排序 my list sort key operator attrgetter attr name 但如果任何列表项有attr None代替attr whatever 然后我得到一个TypeError unord
  • @错误抑制运算符和set_error_handler

    我遵循良好的编程实践 并将 PHP 错误记录到文件中 而不是将其显示给用户 我用set error handler 为了那个原因 现在问题来了 例如 我有一个地方 file exists some file that is outside
  • 具有分类变量的 statsmodels 中的聚类标准误差 (Python)

    我想在使用分类变量和聚类标准误差的 statsmodels 中运行回归 我有一个数据集 其中包含机构 治疗 年份和入学情况 治疗是一个虚拟变量 机构是一个字符串 其他都是数字 我已确保删除所有空值 df dropna reg model s
  • 在r中将地图叠加在3D曲面地图之上

    我使用 rgl surface 创建了一个 3d 地图 主要遵循 Shane 在中的回答this https stackoverflow com questions 1896419 plotting a 3d surface plot wi
  • 如何在firefoxQuantum(浏览器版本57)中安装sqlite管理器插件

    我尝试在 Firefox 中安装 sqlite 管理器插件 但它显示错误 您的 Firefox Quantum 浏览器不兼容 我的 Firefox 浏览器版本是 57 0 4 此扩展取决于嵌入的 sqlite 引擎的接口 在火狐浏览器中 由
  • 使用 webdriver 的 Chrome 和 IE 驱动程序配置文件

    我的项目需要某些 cookie 才能访问该应用程序 对于 Firefox 驱动程序 我使用 firefox 配置文件 我用于手动测试的 ff 配置文件 因为它具有我想要的所有 cookie 来运行脚本 如何在 Chrome 和 IE 浏览器
  • Illustrator/SVG 到 JavaScript 的工作流程? (模板库?)

    在 Illustrator 中 另存为 SVG 时 这是典型的结果