将以像素为单位定义的SVG对象缩放为物理单位？

Question

我有一个SVG元素,宽度和高度定义为"297mm"和"210mm",没有视图框.我这样做是因为我想在A4视口内工作,但我想以像素为单位创建元素.

在某些时候,我需要扩大以像素定义的对象,使其适合A4页面的一部分.例如,我可能有一个100像素宽的物体,我希望水平缩放到30毫米.

这可能吗？我想我需要一个带有新坐标系统的第二个容器,但我找不到任何方法来做到这一点.

编辑

似乎我(或SVG)误解了像素是什么.我意识到我可以将一条线的大小设置为100%,然后得到它的像素大小,getBBox以找到所需的缩放比例.我写了这个代码并在2个客户端上运行,一个使用1280x1024显示器(80dpi),另一个使用1680x1050 LCD(90dpi):

function getDotsPerInch() {
   var hgroup, vgroup, hdpi, vdpi;

   hgroup = svgDocument.createElementNS(svgNS, "g");
   vgroup = svgDocument.createElementNS(svgNS, "g");
   svgRoot.appendChild(hgroup);
   svgRoot.appendChild(vgroup);

   drawLine(hgroup, 0, 100, "100%", 100, "#202020", 1, 1);
   drawLine(vgroup, 100, 0, 100, "100%", "#202020", 1, 1);

   hdpi = hgroup.getBBox().width  * 25.4 / WIDTH;
   vdpi = vgroup.getBBox().height * 25.4 / HEIGHT;

   drawText(hgroup, "DPI, horizontal: " + hdpi.toFixed(2), 100, 100);
   drawText(hgroup, "DPI, vertical:   " + vdpi.toFixed(2), 100, 120);
}

IE9,FF,Opera和Chrome都同意水平和垂直两个显示器都是96 dpi(虽然Opera稍微不准确),Safari在两台显示器上报告0 dpi.所以svg似乎将"像素"定义为"96dpi".一些快速的谷歌搜索似乎证实了这一点,虽然我没有找到任何确定的,大多数命中给出90dpi,96dpi作为FF变种.

Answer 1

您可以嵌套<svg>元素并使用子元素上的 viewBox 属性来获取新的坐标系。指定子<svg>元素的 x、y、宽度和高度属性，指定您希望其在父级坐标系中显示在父级上的位置。