从 Font Awesome 中提取 SVG [英] Extracting SVG from Font Awesome
问题描述
我想从 Font Awesome 字形中获取 SVG 路径数据，以便我可以直接使用它们作为我的 HTML 中的 SVG.我认为这就像从 fontawesome-webfont 复制粘贴路径数据一样简单.svg，但是当我在我的 HTML 中使用它时，符号都被颠倒了.有人知道为什么吗?
I want to get the SVG path data from Font Awesome glyphs so that I can use them straight up as SVG in my HTML. I thought it would be as easy as copy-pasting the path data from fontawesome-webfont.svg, but when I use it in my HTML the symbols are all rendering upside-down. Anyone know why?
(见小提琴)
字体真棒SVG:
<glyph unicode="" 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>
推荐答案
All per SVG 规范...
All per the SVG specification...
与 SVG 中的标准图形不同，初始坐标系的 y 轴指向下方，SVG 字体的设计网格以及字形的初始坐标系的 y 轴指向上方与许多流行字体格式的公认行业惯例保持一致.
根据 此评论，将包装器更改为 <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..."/></svg> 似乎可以解决问题，其中 1792 是每 em 的单位，1536 是字体元素的上升
As per this comment, Changing the wrapper to <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg> seems to do the trick,
where 1792 is the units-per-em and 1536 is the ascent on font-face element
这篇关于从 Font Awesome 中提取 SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
