html - SVG 出现在视口(viewport)之外

Question

我在这里尝试让 SVG 视口(viewport)占据页面宽度和高度的 100%:

http://jsfiddle.net/XZ57u/2/

但是它似乎只有在我改变这个时才会出现:

<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">

对此(视口(viewport)大小):

<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 意味着它占据了整个视口(viewport)百分比，那么为什么它会出现在页面之外呢？

Answer 1

viewBox="0 0 100 100"

简单地说，viewbox 定义了您的 SVG 的坐标系限制...它与 HTML 中您可以在 SVG 中设置的元素的尺寸无关(实际上)本身或在您的 CSS 中。

通过更改 viewbox 你实际上是在说，我只想看到我的 1400x1400 SVg 的左上角 100x100 部分。

编辑:JSfiddle demo

具有原始的 1400 viewbox 和任何 CSS 尺寸。