首页 文章

SVG出现在视口之外

提问于
浏览 次
0

我试图让SVG视口占据页面宽度和高度的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">

对此（视口大小）：

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

html css svg

3 回答

  • 1

    你还必须定义 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>
    回复于
  • 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/

    回复于
  • 1

    viewBox="0 0 100 100"

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

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

    编辑：JSfiddle demo

    使用原始1400视图和任何CSS尺寸 .

    回复于

相关问题