如何将字体大小（以 px 为单位）转换为 svg 文档中使用的单位（mm）答案

【问题标题】：How to convert font size (in px) to the unit used in the document (mm) for svg如何将字体大小（以 px 为单位）转换为 svg 文档中使用的单位（mm）
【发布时间】：2016-12-26 15:17:59
【问题描述】：

我在inkscape here 中创建了svg。

文档大小为mm。对于 2 个文本字段，字体大小如下所示：

style="...;font-size:31.420084px;..."

所以它在px 中给出。现在我想要与文档大小相关的字体大小。

但是我应该如何将px 中的字体大小转换为mm？我需要dpi 之类的东西，但文档没有指定任何内容。

【问题讨论】：

标签： svg font-size

【解决方案1】：

在您的情况下，您的 viewBox 与您的文档尺寸相匹配：

width="164.28572mm"
height="78.10714mm"
viewBox="0 0 164.28572 78.10714"

这意味着所有少单位的值都以毫米为单位。只需指定不带单位的字体大小（或者在您使用 css 的情况下，只需保持文档不变并使用 px）。

令人困惑的部分是，svg 中的 px 始终是用户单位而不是设备像素，因此，您的字体大小已经以 mm 为单位给出......所以您的文档中的 font-size:31.420084px 等于 font-size:31.420084mm在无视图框的文档中（用户单位等于设备像素）

<svg viewBox="0 0 100 20" width="100mm" height="20mm">
  <text x="0" y="12" font-size="12px">12px</text>
</svg>
<svg >
  <text x="0" y="12mm" font-size="12mm">12mm</text>
</svg>

这就是令人困惑的地方。在下一个示例中，“1mm”等于 3.6 个用户单位，但因为 1 个用户单位在现实世界中等于 1mm，所以 1 个 svg mm 等于 3.6 个实际 mm ...

<svg viewBox="0 0 50 50" width="50mm" height="50mm">
  <text x="0" y="5" font-size="1mm">font-size: 1mm</text>
  <text x="0" y="10" font-size="3.6">font-size: 3.6</text>
</svg>

SVG 中的Units 有点连线，但定义明确...

SVGLength Interface 有一个方法 convertToSpecifiedUnits。您可以使用它在 SVG 中的不同单位之间进行转换。

var l = svg.createSVGLength()
l.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX, 12)
l.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_MM)

out1.innerHTML = l.valueAsString

svg {
  width: 0;
  height: 0
}

<svg id="svg">
</svg>
12px = <span id="out1"></span>

【讨论】：

newValueSpecifiedUnits then convertToSpecifiedUnits ?‍♀️ ...终于我明白了。 ?‍♀️

【解决方案2】：

SVG 文档中使用的标准 DPI 是由 CSS 标准指定的标准 DPI。即 96dpi，即每英寸 96 个标准 CSS 像素。

每英寸有 25.4 毫米。所以要将px 转换为mm，公式为：

mm = 25.4 * (px / 96)

因此，如果我们将您原来的 31.420084px 代入该公式，则结果为 8.31mm。

请注意，CSS 不会考虑您要渲染到的设备的真实 DPI。它使用每英寸 96 像素的固定近似值。因此，您不能依赖大小为 96px 或 25.4mm 的元素在屏幕上或打印时实际上是该大小。

【讨论】：