Why is svg path truncated/not scaled?

Question

css

There is a div block with certain dimensions. Inside it is an svg element with path. The svg element is given css to scale to fit:

svg {
   height: 100%;
   width: auto;
   max-width: 100%;
   max-height: 100%;
   object-fit: cover;
   overflow: hidden;
   vertical-align: middle;
}

and attributes:

preserveAspectRatio="xMinYMin meet"
viewBox="0px 0px 300px 200px"

The svg element takes the size of the parent div, but the path inside is always the same size and does not change when you change the scale, viewBox, preserveAspectRatio. If the div is smaller than the svg and the path , then the path is clipped as overflow: hidden would do. overflow: visible shows the path in full, but it also doesn't scale and is always in the top left corner of the svg element.

Answer 1

The viewport does not specify a unit of measure. Just write

preserveAspectRatio="xMinYMin meet"
viewBox="0 0 300 200"