横長モードで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のクローンを作成します。

私はこれで終わる：混乱を言い訳が、それはそれはレンダリング方法をSVGやディスプレイの全体のコードが含まれてくださいhttps://jsfiddle.net/je0ssLm2/1/

。私がY軸上で1.3737倍に拡大しているのは、画像が1280 x 720だが1280 x 989は1：3のアスペクト比に近く、これは米国の手紙のおよそARです。

とにかく、ディスプレイはあまり魅力的ではなく、何らかの理由でプリントすると、余白が非常に大きく、画像がかなり小さく、画面の中央に表示されません。私は欠けているいくつかの重要なCSSはありますか？これは私にナットを運転している、私はこれについてのいくつかの他の答えを見て、様々な試みたが、私はそれを正しく印刷することができません。

私は、私が配置しているのと同じくらいサイズについて心配していません。私は、サイズを正しくするためにスケーリングとサルすることができますが、画像を大きくすると、グラフがページの中央にないので、軸ラベルやタイトルを切り捨てます。私はいつも余分な空白のページも手に入れています。これは世界の終わりではありませんが、間違いなく望ましくありません。

Answer 1

クリーンなソリューションのために、<svg>要素の属性を変更する必要があります。

SVGには、変換を自分で計算することなく、スケール・ツー・フィット操作を宣言的に表現できる2つの属性があります。viewBoxとpreserveAspectRatioです。

：代わりに、あなたがソーステキストで取得することができない場合、あなたは単に秒1で <svg>をラップすることができます

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

を書くことができます

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

を持つ属性の

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

あなたが知覚できるサイズを定義している限り、すべてのメディアで動作するはずですSVGが元々由来するページ

SVGユーザ空間の座標でviewBoxで定義された領域は、というCSSで定義されているので、<svg>要素のサイズに適合します。これは、それを含む要素に適合します。

preserveAspectRatio="none"あなたのスケーリングが不均一です。これは以前は機能しませんでした。これは、デフォルトではアスペクト比が保持されていたからです（CSS変換が縮小された後にのみ）。