HTML에서 풍경 모드로 SVG 인쇄

Question

내 설정이 즉시 작성된 창 개체입니다.

나는 window.document.write()으로 쓰기이를 짓고 있어요 :

<style> 
    @page{ 
     size: landscape; 
     max-height: 100%; 
     max-width: 100%;} 
    svg{ 
     width: 100%; 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     display: block; 
     overflow: visible; 
     transform: scale(1, 1.3737);} 
</style> 

을하고 난에와 document.write(svgClone.innerHTML)의 페이지에서 SVG를 복제.

나는이와 끝까지 :

https://jsfiddle.net/je0ssLm2/1/는 엉망 서하십시오하지만 그것이 렌더링 방법 SVG 및 디스플레이를위한 전체 코드가 포함되어 있습니다. Y 축에서 1.3737로 스케일링하는 이유는 이미지가 1280 x 720이지만 1280 x 989가 대략 1 : 3의 종횡비에 가까우므로 약 US AR letter의 AR입니다.

어쨌든, 디스플레이가별로 매력적이지 않으며, 어떤 이유로 인쇄 할 때 여백이 매우 커서 이미지가 상당히 작아서 화면 중앙에 있지 않습니다. 중요한 CSS가 누락 되었습니까? 이것은 나를 괴롭히는 것입니다. 저는 이것에 대한 몇 가지 다른 해답을 보았고 다양한 시도를했지만 올바르게 인쇄 할 수는 없습니다.

나는 포지셔닝하는 것에 대해 그다지 걱정하지 않는다. 크기를 올바르게 설정하려면 크기 조절과 함께 원숭이를 칠 수 있지만 이미지를 크게 만들면 그래프가 페이지 중앙에 있지 않기 때문에 축 레이블이나 제목을 잘라냅니다. 나는 또한 여분의 빈 페이지를 얻는다. 이것은 세상 끝이 아니지만 바람직하지 않다.

Answer 1

깨끗한 해결책을 위해 <svg> 요소의 속성을 수정해야합니다.

SVG에는 변환을 직접 계산하지 않아도 scale-to-fit 연산을 선언적으로 설명 할 수있는 두 가지 특성이 있습니다. viewBox 및 preserveAspectRatio. 대신 당신이

<svg width="1280" height="720"> 

이 속성의

원본 텍스트를 얻을 수없는 경우, 당신은 단순히 두 번째에 <svg>을 래핑 할 수

<svg viewBox="0 0 1280 720" preserveAspectRatio="none"> 

당신이 쓸 수 있습니다 :

을

<svg viewBox="0 0 1280 720" preserveAspectRatio="none"> 
    <svg width="1280" height="720">...</svg> 
</svg>, 

그리고 합리적인 크기를 정의하는 한 모든 미디어에서 작동해야합니다. SVG가 원래 온 페이지.

SVG 사용자 공간 좌표에서 viewBox에 의해 정의 된 영역은 요소의 크기에 맞춰집니다. CSS에서 width:100%;height:100%;으로 정의되었으므로 포함 요소에 맞습니다.

preserveAspectRatio="none"은 불규칙한 비율 조정을 수행합니다. 이전에는 작동하지 않았던 이유는 기본적으로 종횡비가 그대로 유지 되었기 때문입니다 (그리고 CSS 변환이 축소 된 후에 만).