我一直在努力学习一些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为rect （显然包括中风）和428px为svg 。
我的期望是， svg元素将是一个“薄”容器（即对其内容的维度不加任何内容），因此具有102px的高度。
任何人都知道正确的行为应该是什么，以及我可以怎样去解决这个问题？
I've been really trying to learn some SVG. But browsers seem to get in a right old muddle rendering it.
Take the following 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>View this is any modern browser and you'll see an arbitrary amount of whitespace between the rectangle and the following HTML paragraph. (IE9 doesn't display anything but noone will be surprised about that.)
Firefox (Firebug) doesn't give the heights of either the svg or the rect elements. It just wimps out and says 'auto'.
Opera says the svg has a height of 150px and says 'auto' for the rect.
Chrome mans up and gives heights for both. 102px for the rect (obviously including the stroke) and 428px for the svg.
My expectation is that the svg element would be a 'thin' container (i.e. add nothing to the dimensions of its contents) and therefore have a height of 102px.
Anyone know what the correct behaviour should be and how I might go about fixing this?
最满意答案
您尚未明确定义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>这里有一些实例 。
You've not explicitly defined what the width or height of the SVG is, or where the rectangle is placed, or even what part of the SVG is of interest. It's hardly surprising browsers are dealing with things differently.
Try defining a width and height:
<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>Alternatively, define a 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>Or both:
<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.
更多推荐
发布评论