Question

我试图让SVG视口占据页面宽度和高度的100％：

然而，只有当我改变这一点时才会出现：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" id="city">

到此（视口大小）：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1400 1400" enable-background="new 0 0 1400 1400" xml:space="preserve" id="city">

我的理解是100意味着它占据了整个视口百分比，那为什么它会出现在页面之外呢？

Answer 1

视图框号代表像素，而不是百分比。如果要覆盖整个容器，则必须将SVG元素的宽度和高度设置为100％

改为使用：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="100%" y="100%" xml:space="preserve" id="city">

这里是小提琴：http://jsfiddle.net/t5rhp/

Answer 2

viewBox="0 0 100 100"

简单地说viewbox定义了SVG的坐标系限制......它没有（真的）与HTML中元素的尺寸有关，你可以在SVG本身或者在SVG中设置你的CSS。

通过更改您实际有效的viewbox，我只想查看1400x1400 SVg的左上角100x100部分。

编辑：JSfiddle demo

使用原始1400视口和任何CSS尺寸。

Answer 3

您还必须定义viewBox属性。此外，您还可以使用Preserving Aspect Ratio。

svg {
    width:100%;
    height:100%;
}

<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid none">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

SVG出现在视口之外

3 个答案: