以横向模式从 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>

然后我从它所在的页面克隆 SVG 和document.write(svgClone.innerHTML)。

我最终得到这个： https: //jsfiddle.net/je0ssLm2/1/

请原谅这里的混乱，但它包含 SVG 的完整代码并显示它的渲染方式。我在 Y 轴上缩放 1.3737 的原因是因为图像为 1280 x 720，但 1280 x 989 接近于 1:3 的纵横比，大约是美国字母的 AR。

无论如何，正如您所看到的，显示屏并不是很吸引人，并且当由于某种原因打印时，边距非常大，并且图像非常小并且在屏幕上不太居中。我是否缺少一些重要的 CSS？这让我抓狂，我看过一些关于此问题的其他答案并尝试了各种方法，但我就是无法正确打印。

我并不像我所担心的那样担心尺寸。我可以通过缩放来获得正确的尺寸，但如果我使图像变大，那么我会剪掉轴标签或标题，因为图表不在页面上居中。我也总是得到一个额外的空白页，这不是世界末日，但绝对是不可取的。

Answer 1

您需要修改<svg>元素的属性以获得干净的解决方案。

SVG 有两个属性，可让您以声明方式描述缩放以适应操作，而无需自行计算转换：viewBox和preserveAspectRatio。

而不是你拥有的属性

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

你可以写

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

如果您无法获取源文本，您可以简单地将其包装<svg>在第二个文本中：

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

而且，只要您定义了合理的尺寸，就应该适用于所有媒体，包括 SVG 最初来源的页面。

然后，SVG 用户空间坐标中 viewBox 定义的区域将适合<svg>元素本身的大小 - 因为您在 CSS 中使用 定义了它width:100%;height:100%;，所以它适合包含元素。

preserveAspectRatio="none"为你做不均匀的缩放。这之前不起作用，因为默认情况下，宽高比会被保留（并且只有在缩小到合适的尺寸之后，CSS 变换才会切入）。