A4尺寸的SVG无法在打印中填充整个A4纸

时间：2019-04-23 15:32:26

标签： google-chrome pdf svg printing

我有一个可以输出多级SVG标签的程序，我将所有单位都设置为“ mm”，例如：

SVG(Container width="210mm" height="594mm")
  SVG(A4 size width="210mm" height="297mm")
    SVG(Label size width="105mm" height="99mm")
    SVG(Label size width="105mm" height="99mm")
    SVG(Label size width="105mm" height="99mm")
    SVG(Label size width="105mm" height="99mm")
    SVG(Label size width="105mm" height="99mm")
    SVG(Label size width="105mm" height="99mm")
  SVG(A4 size width="210mm" height="297mm")
    SVG(Label size width="105mm" height="99mm")
    SVG(Label size width="105mm" height="99mm")
    SVG(Label size width="105mm" height="99mm")
    SVG(Label size width="105mm" height="99mm")
    SVG(Label size width="105mm" height="99mm")
    SVG(Label size width="105mm" height="99mm")

每个A4尺寸的SVG的纸张末端都会有一点偏差，因此当我打印3张以上的纸张时，我将在paper2的底部看到paper3的顶部。

我尝试将笔划设置为透明，笔划宽度设置为0，但是笔划似乎没有问题。

这是完整的SVG代码

<?xml version="1.0" standalone="no"?>
<svg width="210mm" height="2673mm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <svg x="0mm" y="0mm" width="210mm" height="297mm">
        <svg x="0mm" y="0mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="105mm" y="0mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="0mm" y="99mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#FF0000" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="105mm" y="99mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#FF0000" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="0mm" y="198mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="105mm" y="198mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
    </svg>
    <svg x="0mm" y="297mm" width="210mm" height="297mm">
        <svg x="0mm" y="0mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#FF0000" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="105mm" y="0mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#FF0000" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="0mm" y="99mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="105mm" y="99mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="0mm" y="198mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#FF0000" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="105mm" y="198mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#FF0000" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
    </svg>
    <svg x="0mm" y="594mm" width="210mm" height="297mm">
        <svg x="0mm" y="0mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="105mm" y="0mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="0mm" y="99mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#FF0000" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="105mm" y="99mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#FF0000" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="0mm" y="198mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="105mm" y="198mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
    </svg>
    <svg x="0mm" y="891mm" width="210mm" height="297mm">
        <svg x="0mm" y="0mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#FF0000" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="105mm" y="0mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#FF0000" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="0mm" y="99mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="105mm" y="99mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="0mm" y="198mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#FF0000" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="105mm" y="198mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#FF0000" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
    </svg>
    <svg x="0mm" y="1188mm" width="210mm" height="297mm">
        <svg x="0mm" y="0mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="105mm" y="0mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="0mm" y="99mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#FF0000" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="105mm" y="99mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#FF0000" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="0mm" y="198mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="105mm" y="198mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
    </svg>
    <svg x="0mm" y="1485mm" width="210mm" height="297mm">
        <svg x="0mm" y="0mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#FF0000" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="105mm" y="0mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#FF0000" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="0mm" y="99mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="105mm" y="99mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="0mm" y="198mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#FF0000" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="105mm" y="198mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#FF0000" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
    </svg>
    <svg x="0mm" y="1782mm" width="210mm" height="297mm">
        <svg x="0mm" y="0mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="105mm" y="0mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="0mm" y="99mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#FF0000" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="105mm" y="99mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#FF0000" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="0mm" y="198mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="105mm" y="198mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
    </svg>
    <svg x="0mm" y="2079mm" width="210mm" height="297mm">
        <svg x="0mm" y="0mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#FF0000" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="105mm" y="0mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#FF0000" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="0mm" y="99mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="105mm" y="99mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="0mm" y="198mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#FF0000" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="105mm" y="198mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#FF0000" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
    </svg>
    <svg x="0mm" y="2376mm" width="210mm" height="297mm">
        <svg x="0mm" y="0mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="105mm" y="0mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="0mm" y="99mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#FF0000" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="105mm" y="99mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#FF0000" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
        <svg x="0mm" y="198mm" width="105mm" height="99mm">
            <rect stroke="#fff" fill="#00FF00" stroke-width="0" x="0%" y="0%" width="100%" height="100%" />
        </svg>
    </svg>
</svg>

此处是Chrome中的打印预览 print preview

这是SVG file

1 个答案:

答案 0 :(得分：0)

“真实世界”坐标单位，例如mm与实际的真实世界测量结果不符。

为简单起见，SVG（实际上是CSS东西）将一英寸定义为96 CSS像素（px）。 确定时，这大致与屏幕的大致分辨率相对应。因此，实际上1in只是96px的简写。

在打印时，浏览器如何决定96px对应于什么。而且，它们（AFAIK）都没有尝试将CS​​S“ DPI”和打印机DPI相匹配。

您需要为浏览器和打印机组合手动调整SVG的比例适当的大小。

上一个问题可能与此有关：SVG for print with scale

相关问题
最新问题