从 Font Awesome 中提取 SVG

Question

我想从 Font Awesome 字形中获取 SVG 路径数据，以便我可以在我的 HTML 中直接将它们用作 SVG。我认为这就像从 fontawesome-webfont.svg 复制粘贴路径数据一样简单，但是当我在我的 HTML 中使用它时，所有符号都颠倒了。有人知道为什么吗？

（见 小提琴）

字体真棒 SVG：

 <glyph unicode="&#xf007;" horiz-adv-x="1408" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z" />

…移植到 HTML SVG（并按比例缩小）：

 <svg width="1000" height="1000" ><path transform="scale(0.1,0.1)" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z"/></svg>

原文由 Yarin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

全部按照 SVG 规范……

与 SVG 中初始坐标系的 y 轴指向下方的标准图形不同，SVG 字体的设计网格以及字形的初始坐标系的 y 轴指向上方，以与公认的行业惯例保持一致许多流行的字体格式。

根据 此评论，将包装器更改为 <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg> 似乎可以解决问题，其中 1792 是 units-per-em， 1536 是 font-face 元素的上升

原文由 Robert Longson 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

更新 2022 感谢 Chris Aelbrecht 下面的评论：

官方仓库有最新版本的 SVG 可供下载

https://github.com/FortAwesome/Font-Awesome/tree/master/svgs

---

原答案：

从 这个 github repo 中获取准备好的 svg 图标

它们已经根据需要翻转和居中

原文由 Angie 发布，翻译遵循 CC BY-SA 4.0 许可协议