在 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>

似乎产生相同的结果......（'none'隐藏元素tho）这是jsfiddle： https ://jsfiddle.net/foreyez/3c7va377/

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

Answer 1

根据SVG 规范

display: none 值表示给定元素及其子元素不应直接呈现（即，这些元素不存在于呈现树中）。 除了 none 或inherit 之外的任何值都表示给定的元素应由SVG 用户代理呈现。

所以除了 none 之外的所有东西都被完全一样对待。

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 将具有相同的高度。

Answer 3

在我的实践中，当我使用<svg>标签时 -- browser (Google Chrome Version 80.0.3987.100 (Official Build) (64-bit))默认将其解释为内联元素。 它表现为标准的内联元素。 如果 complines display: block css-property for it -- 它表现为标准块元素

如果我们进行一些研究并进入开发工具中任何 svg-child 元素的计算选项卡，那么我们将看到它具有display inline属性。 即使我们将设置 svg display: block svg-child 元素默认保持内联元素