Scale border on svg without viewbox

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>

G-Cyrillus G-Cyrillus · Accepted Answer · 2021-06-14T07:26:17

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>

Scale border on svg without viewbox

1 Answers