SVG元素上的显示内联和块之间的区别 [英] Difference between display inline and block on svg elements

问题描述

我了解div的区别.

I understand the difference when it comes to divs.

但是在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/

Seems to produce the same result... ('none' hides the element tho) Here's the jsfiddle: https://jsfiddle.net/foreyez/3c7va377/

有什么区别，内联或阻止的默认值是什么?

what's the difference, and what's the default value, inline or block?

推荐答案

每个 SVG规范

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

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.

因此，除所有内容外，所有内容均会完全相同.

So everything except none is treated exactly the same.

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

SVG is not HTML, it has no concept of reflow (i.e. changes in the position of one element do not affect other elements apart from tspan and tref in text).

这篇关于SVG元素上的显示内联和块之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！