带刻度打印的SVG

Question

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

我知道的是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.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的比例复制，则需要通过1/worldToPrinterScaleFactor缩放（乘）您的SVG。

要打印您的房间的半尺寸副本，您需要将您的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;