SVG rect resizing on hover - css

Question

I'm trying to change the height of rectangles in my svg on hover. I can't for the life of me figure this out and I'd love some help. This is a very simple version of the SVG
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns:bx="https://boxy-svg.com"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 900 350"
style="enable-background:new 0 0 900 350;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FF0000;}
.st1{fill:#FED52A;}
.st2{fill:#00B3E4;}
</style>
<rect id="red" class="st0" width="280" height="350"/>
<rect id="yellow" x="620" class="st1" width="280" height="350"/>
<rect id="blue" x="310" class="st2" width="280" height="350"/>
<rect id="smallred" y="297" class="st0" width="280" height="53"/>
</svg>
I want the size of "red" rectangle to smoothly transition to the size of "small red" on hover and then smoothly transition back when not hovering over it. Ideally I want this all to happen within the SVG. Can anyone help or point me in the right direction?

Answer 1

You can't affect width/height of a rect in an SVG with CSS but you can transform it vertically to the required height.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
#red {
transition: transform 1s ease;
}
#red:hover {
transform: scaleY(calc(53/350));
}
svg {
height: 90vh;
}
<svg version="1.1" id="Layer_1" xmlns:bx="https://boxy-svg.com" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 900 350" style="enable-background:new 0 0 900 350;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FF0000;}
.st1{fill:#FED52A;}
.st2{fill:#00B3E4;}
</style>
<rect id="red" class="st0" width="280" height="350"/>
<rect id="yellow" x="620" class="st1" width="280" height="350"/>
<rect id="blue" x="310" class="st2" width="280" height="350"/>
<rect id="smallred" y="297" class="st0" width="280" height="53"/>
</svg>