Почему обрезается\не масштабируется path у svg?

Question

[tuxx]

Есть блок div с определенными размерами. Внутри него элемент svg с path. Элементу svg задан css для масштабирования по размеру:

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

и аттрибуты:

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

Элемент svg принимает размер родительского div, но вот path внутри всегда одного размера и не меняется при изменении масштаба, viewBox, preserveAspectRatio. Если размер div меньше svg и path, то path обрезается как это делал бы overflow: hidden. overflow: visible показывает path полностью, но он так же не масштабируется и всегда находится в левом верхнем углу элемента svg.

Answer 1

[Владимир Проскурин]

В viewport не указывается единица измерения. Просто пишите

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

Comments

[tuxx]

path масштабируется, но он будто меняет 300 на 100% по высоте svg, а 200 пропорционально 300. И получается что в небольшом блоке совсем маленькое изображение. если же задать размер как у родительского div, то path обрезается снизу, а svg 100% совпадает с div.

[Владимир Проскурин]

tuxx, залейте пример на jsfiddle.net