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

Question

我在这里用 inkscape 创建了 svg 。

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

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

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

但是我应该如何将 font-size 转换px为mm？我需要类似的东西dpi，但该文档没有指定任何内容。

Answer 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在 viewBox less 文档中（其中用户单位等于设备像素）

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

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

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

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

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

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

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
}