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

我理解当涉及到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>

似乎产生了同样的结果。。。（'none'隐藏元素tho） 以下是JSFIDLE：

区别是什么？默认值是什么，内联还是块？

根据

显示值：无表示不应直接渲染给定元素及其子元素（即，渲染树中不存在这些元素）。none或inherit以外的任何值都表示给定元素应由SVG用户代理呈现

因此，除了没有一个被完全相同地对待

---

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

我搜索了这个，因为我在一个页面中有一个SVG，周围元素的高度比SVG的实际高度高5倍

就我所知，如果您使用

display=“none”

、

display=“block”

或

display=“inline”

，它确实会有所不同

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

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

---

display=“block”

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

在我的实践中，当我使用

标记时——浏览器（Google Chrome版本80.0.3987.100（正式构建）（64位））默认将其解释为内联元素。它的行为就像一个标准的内联元素。如果complines

display:block

css属性——它的行为就像standartblock元素一样

---

如果我们进行一些研究，并在任何svg子元素的开发工具中使用computed选项卡，那么我们将看到它具有

display inline

属性。即使我们设置svg

display:block

，svg子元素在默认情况下仍然是内联元素。。。好的。。。看起来SVG中的所有内容都是绝对定位的，所以我认为没有什么区别。文档也只有关于

none

的信息：值

display=“none”

表示给定元素及其子元素将不会被呈现。“无”或“继承”以外的任何值都表示给定元素将由浏览器呈现。SVG规范显然是乱七八糟的。这并不是对发布的问题的回答，但我要加上我的2美分：如果您不想保留下面的额外空间，也不想使用display=“block”，请使用

行高：1

。神秘的空间是因为线条的高度。