javascript - 没有缩放的全屏 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% by 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>

这是我目前拥有的代码的 codepen 示例: http://codepen.io/cecilomar/pen/Gcpys

Answer 1

您的代码笔示例 SVG 包含一个 viewBox 属性。如果您不希望在增大尺寸时缩放 SVG，请移除 viewBox。