为什么100%等于150像素? [英] Why does 100% equal 150 pixels?
问题描述
以下代码产生了一个150像素高的表。为什么150?这是一个SVG怪癖还是更一般的?
The following code results in a table that 150 pixels tall. Why 150? Is this an SVG quirk or something more general?
https ://jsfiddle.net/cc9tyw5v/31/
<table class="root" cellspacing="0">
<tr>
<td>
<svg class="root-symbol" viewBox="0 0 5 6.5" preserveAspectRatio="none" style="height:100%;background-color:lightgreen;">
<text x="0" y="6.5" font-size="9px">a</text>
</svg>
</td>
<td><span style="font-size:2em;background-color:lightblue">I would expect it to be as tall as this span</span></td>
</tr>
</table>
推荐答案
根据此来源
SVG不是只是)图像。 SVG是一个文档。将使用HTML替换元素的默认大小:300像素宽, 150像素高。这适用于
< img>
,< object>
或< iframe>
。默认的 300x150 尺寸也适用于HTML文档中的内联< svg>
元素,但这是HTML5规范最近的一个共识:其他浏览器将默认将内联SVG展开为视口的全尺寸 - 等效于宽度:100vw;高度:100vh; - 这是直接在其自己的浏览器选项卡中打开的SVG文件的默认大小。 Internet Explorer使用100%的宽度和高度为150像素的图片和内嵌SVG缩小差异。
SVG isn't (just) an image. SVG is a document. The default size for HTML replaced elements will be used: 300px wide, 150px tall. This applies for
<img>
,<object>
or<iframe>
. The default 300x150 size also applies to inline<svg>
elements within HTML documents, but that's a relatively recent consensus from the HTML5 specifications: other browsers will by default expand inline SVG to the full size of the viewport—equivalent to width: 100vw; height: 100vh; — which is the default size for SVG files that are opened directly in their own browser tab. Internet Explorer cuts the difference, using width of 100% and height of 150px for images and inline SVG.
这篇关于为什么100%等于150像素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!