Scale border on svg without viewbox - html

Question

I have 2 svgs one has viewbox and the other doesn't. Both are 100% width of the parent. The first one scales with the viewbox and the second scales with the height of the parent, because I have a hover height transition.
The problem is that I want both to have the same stroke-width. I want the stroke to scale like it scales with the svg that has viewbox, but the stroke of the second rect always stays 2px.
How can I keep the functionality of scaling the height of the rect with it's parent, but also to have 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>

Answer 1

You could use a drop-shadow() filter , so no matter if the svg part is rescaled, it will remain the same size around the transparent edges.
example
body>div {
width: 100px;
height: 400px;
}
svg {
width: 100%;
filter: /* on on each sides */
drop-shadow( 2px 0 black)
drop-shadow(-2px 0 black)
drop-shadow( 0 2px black)
drop-shadow( 0 -2px black);
margin: 2px;/* increase margin or padding to include the drop-shadow */
}
.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>