html - 在 svg 元素上显示内联和 block 之间的区别

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 specification

A value of display: none indicates that the given element and its children shall not be rendered directly (i.e., those elements are not present in the rendering tree). Any value other than none or inherit indicates that the given element shall be rendered by the SVG user agent.

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

SVG 不是 HTML，它没有重排的概念(即一个元素位置的变化不会影响除了文本中的 tspan 和 tref 之外的其他元素)。