如何使用SVG符号viewBox正确缩放SVG字体的字形 [英] How to properly scale a glyph of an SVG font using an SVG symbol viewBox

问题描述

我正在使用Bravura音乐字体.

I'm utilizing the Bravura music font.

这是它的字体定义:

<font-face 
    font-family="Bravura"
    font-weight="400"
    font-stretch="normal"
    units-per-em="2048"
    panose-1="5 6 0 0 0 0 0 0 0 0"
    ascent="1638"
    descent="-410"
    bbox="-889 -4080 4749 4120"
    underline-thickness="102"
    underline-position="-102"
    unicode-range="U+0020-1D1DD"
  />

我正在努力围绕字体指标.我已经研究了此网站上的解释:但是我我还不清楚.

I'm trying to wrap my head around font metrics. I've studied the explanation on this site: But I'm still unclear.

我的目标是使用SVG符号将字形转换为正确缩放的SVG路径 viewBox 属性.

My goal is to translate the glyphs into a properly scaled SVG path using an SVG symbol viewBox attribute.

因此EM正方形(是包围每个字形的虚构正方形)为2048x2048单位(由单位/em定义).单位是1/72英寸.我的显示器DPI是96x96

So the EM square (which is an imaginary square enclosing each glyph) is 2048x2048 units (defined by units-per-em). A unit is 1/72 of an inch. My monitor DPI is 96x96

将其转换为像素= 2048 * 96/72 = 2730 1/3 x 2730 1/3

Converting this to pixels = 2048 * 96/72 = 2730 1/3 x 2730 1/3

(让我知道我是否在这里)

(Let me know if I'm off here)

因此，每种字体都应该自然地适合2730 1/3 x 2730 1/3正方形吗?

So each font should natively fit into a 2730 1/3 x 2730 1/3 square?

边界框如何适合此过程? bbox单位也是字形单位吗? (1/72 in)

How does the bounding box #s fit into this process? Are the bbox units in glyph-units as well? (1/72 in)

下面的bbox值是否应直接输入到符号的viewBox属性中?

Should the bbox value below be directly inputted into the viewBox attribute of a symbol?

我需要考虑上升和下降值吗?

Do I need to consider ascent and descent values?

这是一个jsfiddle，多少证明了我的问题: http://jsfiddle.net/1wqa384u/5/

Here is a jsfiddle somewhat demonstrating my issue: http://jsfiddle.net/1wqa384u/5/

任何资源或帮助表示赞赏.

Any resources or help appreciated.

推荐答案

em框包含上升和下降的位置.请注意ascent-descent=2048.

The em box encompasses the ascent and decent. Notice that ascent-descent=2048.

关于您的主要问题，我认为您有点困惑. viewBox告诉浏览器如何缩放符号以适合引用它的<use>指定的大小.

As for your main question, I think you are confusing yourself a bit. The viewBox tells the browser how to scale the symbol to fit the size specified by the <use> that references it.

因此，如果我正确理解您的要求，则符号viewBox应该仅为"0 0 2048 2048".

So if I understand what you want correctly, your symbol viewBox should just be "0 0 2048 2048".

然后，您应该可以像这样引用它，以例如12pt的比例绘制它:

You should then be able to draw it at, say 12pt, by referencing it like so:

<use xlink:href="#mysymbol" x="100" y="100" width="12pt" height="12pt"/>

您不必担心自己进行DPI转换.

You shouldn't have to worry about doing your own DPI conversion.

这篇关于如何使用SVG符号viewBox正确缩放SVG字体的字形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！