在 svg 元素上显示内联和块之间的区别

Question

I understand the difference when it comes to divs.

But in 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>

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?

Answer 1

Per the SVG specification

A value of display: none indicates that the given element and its children shall not be rendered directly (ie, 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 is not HTML, it has no concept of reflow (ie changes in the position of one element do not affect other elements apart from tspan and tref in text).

Answer 2

I searched for this because I have an svg in a page where the height of the surrounding element is 5px more than the actual height of the svg.

As far as I can see it does make a difference if you use display="none" , display="block" or display="inline" .

Just as an image there is space below a svg. Because they are, by default, inline-block elements (inline in some browsers). As such, they sit alongside text: the space that's visible under an svg is there for descenders on letters like 'p' and 'q'.

This can be seen by placing a svg within a div. If the svg is 24px. high, the div will have a height of (for instance) 29 px.

display="block" will prevent the svg to reserve that space, so the div wherein the svg is placed will have the same height.

Answer 3

In my practice, when I use <svg> tag -- browser (Google Chrome Version 80.0.3987.100 (Official Build) (64-bit)) interpret it as inline element by default . And it behaves as a standart inline element . If complines display: block css-property for it -- it behave as standart block element

If we make some research and fall into computed tab in the dev tools on any svg-child element then we'll see that it has the display inline property. Even if we'll set svg display: block the svg-child elements stay inline elements by default