从Font Awesome中提取SVG [英] Extracting SVG from Font Awesome

问题描述

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

（参见 小提琴 ）

字体真棒SVG：

 < glyph unicode =&＃xf007; horiz-adv-x =1408d =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 -81t43 -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 =1000height =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 -81t43 -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> ; 
  

解决方案

全部 SVG规范 ...

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

根据此评论，将包装改为< svg height =179.2width =179.2>< path transform =scale（0.1，-0.1 ）translate（0，-1536）d =.../>< / svg> 似乎可以解决问题，
其中 1792 是每单元的单位数， 1536 是font-face元素的上升值

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?

(See Fiddle)

Font Awesome 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" />

... Ported to HTML SVG (and scaled down):

<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 the SVG specification...

Unlike standard graphics in SVG, where the initial coordinate system has the y-axis pointing downward, the design grid for SVG fonts, along with the initial coordinate system for the glyphs, has the y-axis pointing upward for consistency with accepted industry practice for many popular font formats.

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屋！