html - 是否有从 SVG 文件创建 SVG 路径的工具？

标签 html svg adobe-illustrator

<分区>

有谁知道可以使用 SVG 文件并将其转换为 HTML 5 SVG 路径的工具？你知道 d="M 0 0 L 20 134 L 233 24 Z"fill="#99dd79" 部分吗？

我前往:Use Adobe Illustrator to create SVG Path using "move to" commands

但不确定。这是否意味着 Illustrator 可以绘制任何线条并将其保存为 SVG 路径？

注意: 是的，有 inkscape，但如果可能的话，我正在寻找渐变和 mask 支持。我希望能够利用 .ai 文件并使用 illustrator 或 Acrobat 或其他工具导出它们……有什么东西吗？还是作为输出格式内置到 Illustrator 或 Acrobat 中？

最佳答案

Gimp 可用于将具有基元(例如矩形、圆形等)的 SVG 转换为可在 HTML5 中使用的单个路径。

  1. 首先下载 Gimp:https://www.gimp.org/downloads/
  2. 将您的 SVG 导出为 .svg使用任何选择的工具进行归档，例如插画师。如果 SVG 输出现在很乱，请不要担心，Gimp 会清理它
  3. 使用 File -> Open 将 SVG 文件导入 Gimp，应显示以下(或类似)对话框:

Gimp SVG Open Dialog

同时选中导入路径和合并导入路径选项

  1. 然后转到Windows->Dockable Dialogues->Paths
  2. 右键单击显示Imported Path 的单个路径，您应该会看到以下对话框:

enter image description here

  1. 点击导出路径...并将此文本文件保存到您选择的位置
  2. 找到并使用您选择的文本编辑器打开此文件，例如记事本、TextEdit
  3. 复制 <path d="copy this text here" /> 中的文本
  4. 由于 Gimp 格式化带有大量空格的文本，您可能需要重新格式化它，方法是删除一些空格以将其粘贴到单行的 HTML 中

关于html - 是否有从 SVG 文件创建 SVG 路径的工具？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11529470/

上一篇：html - 如果元标记出现在文档正文中会怎样？

下一篇：html - 样式化输入 type=number

相关文章：

php - Javascript 确认和 jquery fadein 没有响应

html - 垂直对齐(行高法)不起作用

asp.net - 如何快速设计包含多个数据字段的 ASP.Net webforms 详细信息页面？

javascript - getSVGDocument() 在 Safari 中返回 null

javascript - 如何修复 Javascript 中的 "Undefined is not an object"错误

html - 在 HTML 中使用 .ai 文件作为图标的最佳方式是什么？

javascript - 如何在 Angular 组件的输入元素上正确设置 ID？

html - 具有透明内容背景的剪辑路径语音气泡

html - 为什么阴影过滤器在 Internet Explorer 中不起作用？

javascript - 应用图形样式

©2024 IT工具网  联系我们