显示内联和svg元素上的块之间的区别

Question

我理解div的区别.

但在svg中:

<svg>
    <rect display="block" id="svg_3" height="57" width="52" y="20" x="41" stroke-width="5" stroke="#000000" fill="#FF0000"/>

     <rect display="inline" id="svg_3" height="57" width="52" y="20" x="120" stroke-width="5" stroke="#000000" fill="#0000BB"/>
</svg>

似乎产生相同的结果...('无'隐藏元素tho)这里是jsfiddle:https://jsfiddle.net/foreyez/3c7va377/

有什么区别,什么是默认值,内联或块？

Answer 1

根据SVG规范

display:none的值表示不应直接呈现给定元素及其子元素(即,渲染树中不存在这些元素).除none或inherit之外的任何值都表示给定元素应由SVG用户代理呈现.

所以除了没有之外的所有东西都被完全相同.

SVG不是HTML,它没有回流的概念(即一个元素的位置变化不会影响除文本中的tspan和tref之外的其他元素).

Answer 2

我搜索这个是因为我在一个页面中有一个 svg，其中周围元素的高度比 svg 的实际高度高 5px。

据我所知，如果您使用display="none",display="block"或display="inline".

就像图像一样，svg 下方有空间。因为默认情况下它们是内联块元素（在某些浏览器中是内联的）。因此，它们与文本并排：在 svg 下可见的空间用于“p”和“q”等字母的下行。

这可以通过在 div 中放置一个 svg 来看到。如果 svg 是 24px。高，div 的高度（例如）为 29 像素。

display="block" 将阻止 svg 保留该空间，因此放置 svg 的 div 将具有相同的高度。