Html SVG元素似乎具有任意高度_Html_Svg

Html SVG元素似乎具有任意高度

html svg

Html SVG元素似乎具有任意高度,html,svg,Html,Svg,我一直在努力学习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;

我一直在努力学习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

为“自动”

铬合金的人向上，并给予高度两者。102px用于

rect

（显然包括笔划），428px用于

svg

我的期望是

svg

元素将是一个“薄”容器（即，不向其内容的维度添加任何内容），因此高度为102px

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

您还没有明确定义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>

或两者兼而有之：

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

谢谢你，罗伯特。那么，我是否必须自己计算

svg

元素中图形的尺寸，以便给它一个宽度和高度？我假设它会围绕其内容来调整大小，就像一个

div

。顺便说一下，感谢jsfiddle链接。这是一个典型的有帮助的答案。@David由于“内容”是一个无限平面，所以它不会围绕内容进行调整；）选民们能解释一下吗？啊。2票反对。没有解释或建议。巨魔？

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