9

我定义了一个宽度和高度为“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 报告两台显示器的 dpi 为 0。所以 svg 似乎只是将“像素”定义为“96dpi”。一些快速的谷歌搜索似乎证实了这一点，虽然我还没有找到任何确定的东西，而且大多数点击给出 90dpi，96dpi 作为 FF 变体。

4

1 回答 1

0

您可以嵌套<svg>元素并在子元素上使用 viewBox 属性来获取新的坐标系。给子<svg>元素 x、y、width 和 height 属性，这些属性是您希望它在父坐标系中出现在父元素上的位置。

于 2012-05-16T13:01:13.000 回答