귀하의 경우 viewBox는 문서 치수와 일치합니다.
width="164.28572mm"
height="78.10714mm"
viewBox="0 0 164.28572 78.10714"
즉, 단위보다 작은 값은 모두 mm 단위입니다. 단위없이 글꼴 크기를 지정하십시오 ( 또는 CSS를 사용할 때 문서를 그대로 유지하고 px를 사용하십시오 ).
혼란스러운 부분은 svg의 px가 항상 장치 픽셀이 아니라 사용자 단위라는 것입니다. 그러한 이유로 글꼴 크기는 이미 mm 단위로 지정되어 있으므로 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>
그것이 혼란스러워지는 곳입니다. 다음 예에서 "1mm"는 3.6 사용자 단위와 같지만 1 개의 사용자 단위는 실제 세계에서 1mm와 같으므로 1 개의 svg mm는 3.6 실제 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>
SVG의 단위 는 약간 유선이지만 잘 정의되어 있습니다.
SVGLength 인터페이스 메소드가 있습니다 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>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다