在 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 元素默認保持內聯元素