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

Question

我在 inkscape 中创建了 svg here。

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

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

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

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

Answer 1

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

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

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

令人困惑的部分是，svg 中的 px 始终是用户单位而不是设备像素，因此，您的字体大小已经以毫米为单位给出...所以您文档中的 font-size:31.420084px 等于在 viewBox less 文档中 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 real 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>

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

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>

Answer 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 的元素在屏幕上或打印时实际上是该大小。

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

How to convert font size (in px) to the unit used in the document (mm) for svg

svg

font-size