svgのフォントサイズ（px）を文書で使用されている単位（mm）に変換する方法

Question

inkscape hereでsvgを作成しました。

文書サイズはmmです。 2つのテキストフィールドの場合、フォントサイズは、次のように与えられる：

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

それはpxに与えられているので。今では、フォントのサイズをドキュメントのサイズに関連付ける必要があります。

フォントサイズをpxに変更するにはどうすればよいですか？mm？ dpiのようなものが必要ですが、ドキュメントには何も指定されていません。あなたのケースでは

Answer 1

、あなたのビューボックスは、ドキュメントの寸法に一致します。

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

少ない値はmm単位であるすべてのユニットを意味します。フォントサイズを単位なしで指定してください（、またはcssを使用する場合は文書をそのまま使用し、pxを使用してください）。

混乱している部分は、svgのpxは常にデバイス単位ではなくユーザー単位であるため、font-sizeは既にmmで指定されています。したがって、文書内のfont-size:31.420084pxはviewBoxの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>

厥。次の例では「1ミリメートルは、」3.6ユーザ単位に等しいが、1人のユーザ装置は、実世界で1ミリメートルに等しいので、1つのSVG MMは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

SVG文書で使用される標準的なDPIはCSS規格によって指定されている標準的なDPIです。それは1インチあたり96dpiまたは96標準CSSピクセルです。

インチあたり25.4 mmです。だから、mmにpxを変換するために、式は次のようになります。

mm = 25.4 * (px/96) 

我々はその式にあなたの元31.420084pxを差し込むのであれば、結果は8.31mmです。

CSSは、レンダリングするデバイスの実際のワードDPIを考慮しないことに注意してください。これは96pixel/inchの固定近似を使用します。したがって、サイズが96pxまたは25.4mmの要素が画面上または印刷時に実際にそのサイズになるという事実に頼ることはできません。