没有缩放的全屏SVG

Question

有什么方法可以让SVG 100％100％但禁用缩放？

我需要图像位于页面中间（水平和垂直）。这里的问题是我想要显示SVG画板之外的区域，因此集中使用CSS对我来说不起作用。我知道如果您的图像宽度为100％且设置高度可能会显示这些区域，反之亦然。

这可以通过Flash实现，但我还没有找到使用SVG和HTML的方法。

普通SVG：

<svg style="width: 100px; height: 100px;">
    <circle cx="50" cy="50" r="100" stroke="black" stroke-width="3" fill="red" />
</svg>

100％宽度

<svg style="width: 100%; height: 100px;">
    <circle cx="50" cy="50" r="100" stroke="black" stroke-width="3" fill="red" />
</svg>

现在，当您使用相同的代码并使其100％100％时，它会缩放图像。有没有办法停止这个？

100％乘以100％正虚拟无代码

<svg style="width: 100%; height: 100%;" ##no_scale_code##>
    <circle cx="50" cy="50" r="100" stroke="black" stroke-width="3" fill="red" />
</svg>

这是我到目前为止的代码的代码示例： http://codepen.io/cecilomar/pen/Gcpys

Answer 1

您的codepen示例SVG包含viewBox属性。如果您不希望在缩小尺寸时缩放SVG，请移除viewBox。