Question

我在inkscape here中创建了svg。

文档尺寸为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"

表示所有单位较小的值均以mm为单位。只需指定不带单位的字体大小（，或者在使用css的情况下，只保持文档不变并使用px ）。

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

＆＃13;

font-size:31.420084mm

＆＃13;

这就是令人困惑的地方。在下一个例子中，＃1; 1mm＆＃34;相当于3.6个用户单位，但由于1个用户单位在现实世界中等于1毫米，因此一个svg mm等于3.6真实mm ...

＆＃13;

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

＆＃13;

SVG中的

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

SVGLength Interface有一个方法<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中的不同单位之间进行转换。

＆＃13;

convertToSpecifiedUnits

＆＃13;

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

＆＃13;

svg {
  width: 0;
  height: 0
}

＆＃13;

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为单位）转换为文档中使用的单位（mm）为svg

2 个答案: