我一直在努力学习一些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表示“auto”.
Chrome会提升并为两者提供高度.对于矩形102px(显然包括中风)和svg为428px.
我的期望是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="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>
原文地址:https://www.jb51.cc/html5/168490.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。