以设计尺寸显示缩放的SVG

Question

我有一个符合其父<object>尺寸的SVG图像。通过更改其currentScale和currentTranslate属性来缩放图像。如何缩放要以预期尺寸显示的图像并将其置于视口中心？

示例代码：

<object width="500" height="300" data="pic.svg">
    <!-- The image will scale to be 300px heigh, 
         I need it to be shown at 32x32 and centered in the viewport,
         but could be zoomed to any size.
         Setting width and height attributes will crop the viewable area to 32x32,
         so we can't use this solution.
     -->
    <svg viewBox="0 0 32 32" ... >
</object>

Answer 1

好的，我找到了解决方案。为此，我从宽度/高度/视图框中获得了预期的大小（取决于可用的大小），使viewBox等于可用视口的大小（即包含<object>标记）并更改了x / y值viewBox属性的设置，使图像看起来位于视口的中心，并删除宽度和高度属性（如果它们存在）。

我在Opera SVG Viewer widget中使用此功能，您可以看到我的SVG缩放库here。

Answer 2

将viewBox属性设置为包含要显示的内容区域（在本地SVG坐标中），但将SVG的height和width属性设置为该数字像素，你希望它在网页上显示。