Currently, I am working with 2 SVGs where one has a viewbox and the other doesn't. They both are set to be 100% width of the parent element. The first SVG scales according to its viewbox while the second one scales according to the height of the parent due to a hover height transition.
The issue I'm facing is that I want both SVGs to have the same stroke-width. I want the stroke to scale just like it does with the SVG that has a viewbox, but the second SVG's stroke always remains at 2px.
How can I maintain the functionality of scaling the height of the second SVG with its parent while also achieving the same border width as the first SVG?
body > div{
width: 100px;
height: 400px;
}
svg{
width: 100%;
stroke-width: 2px;
stroke: black;
}
.svg-with-viewbox rect{
fill: red;
}
div > div{
height: 50px;
width: 100%;
transition: 1.5s all;
}
div > div:hover{
height: 200px;
}
.scale-height{
fill: yellow;
height: 100%;
}<div>
<svg class="svg-with-viewbox" viewbox="0 0 20 20">
<rect height="20" width="20"/>
</svg>
<div>
<svg class="scale-height">
<rect width="100%" height="100%">
</rect>
</svg>
</div>
</div>