Rect not covering the parent svg height?-CodePudding

I have the following code:

<svg width="100" height="100" viewBox="0 0 1920 1080">
  <rect x=0 y=0 width=1920 height=1080 />
</svg>

Why does the rect cover the full width of its parent svg in units? but not the height?

Codesandbox

CodePudding user response：

Because of the dimensions you are using.

What you have is a rectangle inside a square:

<svg width="100" height="100" viewBox="0 0 1920 1080">
  <rect x=0 y=0 width=1920 height=1080 />
</svg>

When what you should consider is changing your viewBox to being the same height/width ratio as the parent SVG (either all 1920 or all 1080)

<svg width="100" height="100" viewBox="0 0 1080 1080">
  <rect x=0 y=0 width=1080 height=1080 />
</svg>

Alternatively, you could change the SVG dimensions

<svg width="192" height="108" viewBox="0 0 1920 1080">
  <rect x=0 y=0 width=1920 height=1080 />
</svg>