时间戳

首页 > 解决方案 > 将字形路径转换为 ​​SVG

svg - 将字形路径转换为 ​​SVG

问题描述

我有以下字形路径：

<glyph glyph-name="right-nav-workflow" unicode="&#xe8c1;" d="M251 101c0 65 0 131 0 196 26 0 52 0 78 0 0 27 0 54 0 81-29 7-52 23-67 50-11 20-14 41-10 64 8 45 48 79 92 81 49 1 88-29 102-79 2 0 4 0 6 0 20 0 40 0 60 0 5 0 8 1 11 5 32 32 64 64 96 96 2 1 3 3 4 4 42-42 84-84 127-127-1 0-2-2-4-4-32-32-65-65-98-98-2-2-4-6-4-10 0-21 0-43 0-64 30-8 53-24 67-52 12-21 15-44 9-68-11-46-55-78-102-75-48 3-88 42-92 91-4 48 28 91 78 104 0 1 1 3 1 4 0 21 0 42 0 62 0 3-2 5-3 7-28 28-55 55-83 83-1 1-3 3-5 3-22 0-45 0-68 0-5-19-13-36-27-50-14-14-31-23-50-27 0-27 0-53 0-81 26 0 52 0 78 0 0-65 0-130 0-196-65 0-131 0-196 0z m157 156c-40 0-79 0-118 0 0-39 0-78 0-117 40 0 79 0 118 0 0 39 0 78 0 117z m275-58c0 33-26 59-59 59-32 0-59-26-59-59 0-33 27-59 60-59 32 0 58 26 58 59z m-334 216c33 0 59 27 59 59 0 33-26 59-59 59-33 0-59-26-59-59 0-33 26-59 59-59z m275-11c23 23 46 46 69 69-23 23-47 46-69 68-23-22-46-46-69-69 23-22 46-45 69-68z" horiz-adv-x="1000" />

如何将其转换为 SVG？我试图将它保存在带有 svg 扩展名的文本文件中，但似乎无法正常工作。

标签： svg

解决方案

获取原始绘图数据，将其放在路径元素中，删除字形特定属性，添加适当的 viewBox。现在你有了一个可以用作内联 SVG 的东西。如果要将其保存为独立的 SVG，则需要添加名称空间声明。

<svg height="400px" width="400px" viewBox="0 0 1000 1000">
  <path transform="scale(1,-1) translate(0,-650)" fill="none" stroke="red" stroke-width="1" d="M251 101c0 65 0 131 0 196 26 0 52 0 78 0 0 27 0 54 0 81-29 7-52 23-67 50-11 20-14 41-10 64 8 45 48 79 92 81 49 1 88-29 102-79 2 0 4 0 6 0 20 0 40 0 60 0 5 0 8 1 11 5 32 32 64 64 96 96 2 1 3 3 4 4 42-42 84-84 127-127-1 0-2-2-4-4-32-32-65-65-98-98-2-2-4-6-4-10 0-21 0-43 0-64 30-8 53-24 67-52 12-21 15-44 9-68-11-46-55-78-102-75-48 3-88 42-92 91-4 48 28 91 78 104 0 1 1 3 1 4 0 21 0 42 0 62 0 3-2 5-3 7-28 28-55 55-83 83-1 1-3 3-5 3-22 0-45 0-68 0-5-19-13-36-27-50-14-14-31-23-50-27 0-27 0-53 0-81 26 0 52 0 78 0 0-65 0-130 0-196-65 0-131 0-196 0z m157 156c-40 0-79 0-118 0 0-39 0-78 0-117 40 0 79 0 118 0 0 39 0 78 0 117z m275-58c0 33-26 59-59 59-32 0-59-26-59-59 0-33 27-59 60-59 32 0 58 26 58 59z m-334 216c33 0 59 27 59 59 0 33-26 59-59 59-33 0-59-26-59-59 0-33 26-59 59-59z m275-11c23 23 46 46 69 69-23 23-47 46-69 68-23-22-46-46-69-69 23-22 46-45 69-68z"/>
  
</svg>

更新 - 罗伯特指出 SVG 字体规范的 y 轴（底部为 0）与 SVG 规范相反（0 为顶部）-> 因此您还需要使用比例沿 x 轴翻转图形（ 1,-1)。

推荐阅读