生成 SVG 代码以在 HTML 文件中使用

Question

我在 HTML 文件中使用 SVG 标签为视频播放器创建一些图形。现在我想使用 Inkscape 来创建 svg 代码，然后获取生成的代码并在我的 svg 标签中使用它。

这种方法起初似乎很有效。我设计了一个暂停按钮，并为 "d"-attribute inkscape 生成了代码：

M 12.5 10 L 12.5 30 L 17.5 30 L 17.5 10 L 12.5 10 z M 22.5 10 L 22.5 30 L 27.5 30 L 27.5 10 L 22.5 10 z

在 HTML 中效果很好。但是，对于 Inkscape 生成的扬声器符号：

m8.0312,1028.4,0,8,6,0,6,6,0-20-6,6z

这是行不通的。看到，需要更复杂的元素（与那些直线相比），有没有办法直接将这两个转换？

这是嵌入在 HTML 文件中的两个版本：

<svg width="40px" height="40px">
  <path d="M 12.5 10 L 12.5 30 L 17.5 30 L 17.5 10 L 12.5 10 z M 22.5 10 L 22.5 30 L 27.5 30 L 27.5 10 L 22.5 10 z" fill="black" />
  
  <path d="m 8.03125,1028.3622 0,8 6,0 6,6 0,-20 -6,6 z" fill="black" />
</svg>

您好，蒂莫

Answer 1

<svg width="40px" height="40px">
  <path d="m 8.03125,15 0,8 6,0 6,6 0,-20 -6,6 z" fill="black" />
</svg>

你的问题是1028.3622。将 Inkscape (Ctrl+Shift+D) 页面调整为 40 px 宽 x 40 px 高。把你的图片放在页面里面，你应该没有问题。

我已经删除了你的暂停按钮并调整了播放按钮的相对 y。

生成 SVG 代码以在 HTML 文件中使用

Generate SVG code for usage in HTML file

html

svg

inkscape