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转换才会切入）。

在横向模式下从HTML打印SVG

1 个答案: