SVG用于打印带刻度

Question

我有一个SVG文件代表我的浏览器中的一个单位，我需要以特定的比例打印输出。我正在使用SVG.js来操纵SVG内容，但我无法找到正确的视口视图框设置的组合以满足我的需求。

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

对于打印，我需要尊重“特定比例”，例如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.com/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

您应该以打印尺寸设置宽度和高度参数，例如毫米;然后你还应该定义具有完全相同的宽度，高度参数的视图框，以获得打印输出上的确切大小。

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

<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.com/svgjs" viewBox="0 0 100 80">
     .....
</svg>

这将提供所需的规模印刷输出;只要打印机设置为100％刻度（而不是“适合页面”），并且纸张尺寸正确。

如Paul所解释的，可以将缩放添加为针对不同要求的附加系数。