如何解决Safari无法按指定尺寸打印SVG及图片的问题？

架构老林

2026-8-7

Safari打印内联SVG尺寸偏差问题排查

问题描述

网站动态生成包含内联SVG的HTML，要求用户按100%比例打印。该功能在Firefox、Chrome中正常，但在Safari中打印出的图像尺寸偏差极大。

SVG以毫米为单位定义尺寸，示例代码如下：

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='62mm' height='192mm' viewBox='0 0 62 192' preserveAspectRatio='none'>

三个浏览器在屏幕上显示的图形尺寸完全一致，但Safari打印时，无论是SVG还是JPG格式的内容，尺寸都不准确。

尝试的解决方案及问题

临时方案：为Safari用户预缩放SVG，但Safari打印时的缩放比例由图片宽度决定，导致界面自带的缩放功能无法正常工作。
CSS打印样式尝试：设置如下打印样式，但未达到预期效果（注：原代码存在@page嵌套的语法错误，已修正）：

<style>
@media print {
    html, body, .container, svg {
        width: 62mm !important;
        height: 192mm !important;
        margin: 0mm !important;
        padding: 0mm!important;
    }
}
@page {
    size: 6.2cm 19.2cm !important; 
    margin: 0mm !important;
    padding: 0mm !important;
}
</style>