我一直在努力学习一些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会提升并为两者提供高度.102px为rect(显然包括中风)和428px为svg.
我的期望是svg元素将是一个"薄"容器(即不增加其内容的尺寸),因此高度为102px.
任何人都知道应该采取什么样的正确行为以及如何解决这个问题？
rob*_*rtc 14
您没有明确定义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>
| 归档时间： |
|
| 查看次数： |
8165 次 |
| 最近记录： |