Вопрос по масштабированию и позиционированию SVG внутри HTML, на мой взгляд, лучше всего начать решать с выяснения физических размеров ( размеров ширины и высоты, как нарисована фигуры в векторном редакторе)
Для этого используется метод JS getBBox()
* {padding:0;margin:0;}
.cn {
width:20vw;
height:20vh;
background-color:gold;
}
<div class='cn'>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 36 36" >
<path id="trace" fill="black" d="M36.2-.2H1C.5 6.8-.3 14 0 21.1c.2 5 .7 10 1 14.9h35Z" />
</svg>
</div>
<script>
console.log(trace.getBBox())
</script>
Физические размеры svg: width ~= 36px
height~=36px
Так как aspectRatio=1:1
(соотношение размеров сторон) одинаковое у
svg и родительского контейнера, то svg полностью занимает
родительский контейнер.
Размеры родительского контейнера указаны в относительных единицах окна браузера vw
, vh
поэтому при разрешении 1400х1050
ширина svg фигуры на экране будет 1400 х 0.2 = 280px
Увеличим размеры родительского контейнера .cn
: width="40vw;"
height="40vh"
* {padding:0;margin:0;}
.cn {
width:40vw;
height:40vh;
background-color:gold;
}
<div class='cn'>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 36 36" >
<path id="trace" fill="black" d="M36.2-.2H1C.5 6.8-.3 14 0 21.1c.2 5 .7 10 1 14.9h35Z" />
</svg>
</div>
<script>
console.log(trace.getBBox())
</script>
Обратите внимание, что SVG опять полностью заполнил на дисплее родительский контейнер, который увеличился в 2 раза, но физические размеры svg остались те же - 36х36px
Решение:
как выполнить, чтобы был во всю высоту независимо от ширины?
Svg имеет ширину в 50%, а высота блока 300px.
Устанавливаем:
.cn {
display:flex;
justify-content:flex-end; для размещения svg в конце широкого контейнера
width:50vw; регулировка ширины родительского контейнера
background-color:gold;
max-height:300px; фиксированная высота родительского блока
overflow:hidden;
}
* {padding:0;margin:0;}
.cn {
display:flex;
justify-content:flex-end;
width:50vw;
background-color:gold;
max-height:300px;
overflow:hidden;
}
svg {
max-height:300px;
}
<div class='cn'>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 36 36" >
<path id="trace" fill="black" d="M36.2-.2H1C.5 6.8-.3 14 0 21.1c.2 5 .7 10 1 14.9h35Z" />
</svg>
</div>