Question

我有一个宽度和高度为“297mm”和“210mm”的SVG元素，没有视图框。我这样做是因为我想在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，width和height属性，使其显示在父级坐标系中父级的位置。

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

1 个答案: