Question

我一直在努力学习一些SVG。但浏览器似乎陷入了一种正确的混乱状态。

采用以下HTML：

<html>
  <head></head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
      <rect height="100" width="100" style="stroke:#006600; fill: #00cc00"/>
    </svg>
    <p>Hello? Hellooooooooooooo?</p>
  </body>
</html>

查看这是任何现代浏览器，您将在矩形和以下HTML段落之间看到任意数量的空白。（IE9没有显示任何内容，但没有人会对此感到惊讶。）

Firefox（Firebug）没有给出svg或rect元素的高度。它只是躲避并说'自动'。

Opera说svg的高度为150px，并为rect说“自动”。

Chrome可以提升并为两者提供高峰。 rect的102px（显然包括笔画）和svg的428px。

我的期望是svg元素将是一个'瘦'容器（即不添加任何内容的尺寸），因此高度为102px。

任何人都知道应该采取什么样的正确行为以及如何解决这个问题？

Answer 1

您没有明确定义SVG的宽度或高度，矩形放置的位置，甚至SVG的哪些部分。浏览器以不同的方式处理事情并不奇怪。

尝试定义宽度和高度：

<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="102px" height="102px">
  <rect height="100" width="100" style="stroke:#006600; fill: #00cc00"/>
</svg>

或者，定义viewBox：

<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 102 102">
  <rect height="100" width="100" style="stroke:#006600; fill: #00cc00"/>
</svg>

或两者：

<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="-50 -50 52 52" width="102px" height="102px">
  <rect height="100" width="100" style="stroke:#006600; fill: #00cc00"/>
</svg>

Here are some examples in action

SVG元素似乎具有任意高度

1 个答案: