Как преобразовать размер шрифта (в пикселях) в устройство, используемое в документе (мм) для svg

Question

У меня есть svg, созданный в inkscape 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).

Сложная часть состоит в том, что px в svg всегда являются единицами пользователя, а не пикселями устройства. По этой причине размер шрифта уже указан в мм ... так что font-size:31.420084px в вашем документе равен font-size:31.420084mm в viewBox меньше документа (где пользовательские единицы равных пикселей устройства)

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

то, где он получает в заблуждении. В следующем примере «1ммы» равно 3,6 единиц пользователя, а потому, что 1 единица пользователя составляет 1 мм в реальном мире, один SVG мм составляет 3,6 мм реальных ...

<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

Стандартный DPI используется в SVG документ является стандартным DPI, которое определено стандартом CSS. Это 96 точек на дюйм, или 96 стандартных пикселей CSS на дюйм.

Есть 25,4 мм на дюйм. Таким образом, чтобы преобразовать px в mm, формула будет:

mm = 25.4 * (px/96) 

Так что, если мы подключить ваш исходный 31.420084px в эту формулу, результат 8.31mm.

Обратите внимание, что CSS не учитывает действительное слово DPI устройства, к которому вы выполняете визуализацию. Он использует фиксированную аппроксимацию 96 пикселей на дюйм.Поэтому вы не можете полагаться на тот факт, что элемент размером 96px или 25.4mm будет на самом деле таким размером на экране или при печати.