用于带比例打印的 SVG

Question

我的浏览器中有一个表示平面的 SVG 文件，我需要以特定比例打印输出。我正在使用 SVG.js 来操作 SVG 内容，但找不到满足我需要的正确视口视框设置组合。

我所知道的是 SVG 源文件的大小。通过 x 和 y 坐标我计算了一个距离以找到正确的“屏幕比例”以匹配计划中的 1cm 与像素数。

对于打印，我需要遵守“特定比例”，例如 1/50。所以我试图通过使用“屏幕比例”和 SVG 文件大小来获得真实的平面尺寸。然后我在总尺寸上应用了 1/50 (0.02) 比例。然后我尝试猜测给定 72dpi 分辨率的像素数。

这是我的代码：

var svgNode = SVG(planNode);

var totalWidthCm = (svgNode.width().replace('px', '') * screenScale * printScaleVal);
var totalHeightCm = (svgNode.height().replace('px', '') * screenScale * printScaleVal);
var totalWidthPx = totalWidthCm * 0.393701 * 72;
var totalHeightPx = totalHeightCm * 0.393701 * 72;

svgNode.height(totalHeightPx + 'px');
svgNode.width(totalWidthPx  + 'px');

svgNode.viewbox('0', '0', '1000', '600');

SVG 输出：

<svg xmlns:cc="http://creativecommons.org/ns#" xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg" version="1.1" width="495.79113386880005px" height="387.87611496479997px"
     preserveAspectRatio="xMinYMin slice" id="plan" xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 496 388">
     .....
</svg>

事实上，我不知道如何设置视口和视框以显示完整或切片的缩放调节 SVG，以便以 A4 或 A3 格式打印它。

哦，亲爱的 SVG 专家，希望我的瓶子能送到你手中 :D

Answer 1

您不能相信屏幕上为 X 像素的内容在打印时也将是 X 像素这一事实。您需要打印一些样本并测量打印的 SVG 以计算比例。它会因浏览器和打印机而异。

首先将您的 SVG 设置为在屏幕上 1:1 处呈现。为此，请设置您的 width="496" 和 height="388" 以匹配 viewBox。

打印出来并测量一个已知尺寸。比如一堵墙

假设您的平面图上 2 米高的墙在打印时为 53 毫米。那么你的实际长度打印长度比例因子是

2m = 53mm printed
worldToPrinterScaleFactor = 53 / 2000

要打印您房间的 1:1 比例副本，您需要将 SVG 缩放（乘以）1 / worldToPrinterScaleFactor。

要打印您房间的半比例副本，您需要将 SVG 缩放（乘以）0.5 / worldToPrinterScaleFactor。

但如果您想以 1/50 打印...

printScale = 1 / 50

那么您需要通过以下方式缩放您的 SVG：

printScale / worldToPrinterScaleFactor

所以你的 JS 应该是这样的：

var printScale = 1 / 50;

var worldToPrinterScaleFactor = 53 / 2000;
var svgScale = printScale / worldToPrinterScaleFactor;

var svgNode = document.getElementById("plan");
var viewBox = svgNode.viewBox.baseVal;

svgNode.width.baseVal.value = svgScale * viewBox.width;
svgNode.height.baseVal.value = svgScale * viewBox.height;

Answer 2

您应该以打印尺寸设置宽度和高度参数，例如毫米；然后你还应该用完全相同的宽度、高度参数定义视图框，以获得打印输出的精确尺寸。

在你的情况下（大约 1/50 从像素到 cms 的转换）：

<svg xmlns:cc="http://creativecommons.org/ns#" xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg" version="1.1" width="100mm"   height="80mm"
     preserveAspectRatio="xMinYMin slice" id="plan" xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 100 80">
     .....
</svg>

这将按比例提供所需的打印输出；前提是打印机设置为 100% 比例（而不是“适合页面”）和正确的纸张尺寸。

如 Paul 所解释的，可以根据不同的要求添加缩放作为附加系数。

用于带比例打印的 SVG

SVG for print with scale

javascript

svg

viewport

viewbox