SVG rect resizing on hover

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?

https://stackoverflow.com/questions/22088987/how-to-change-the-width-of-an-svg-rect-with-css — Paulie_D, Jan 17 '22 at 17:04
Yeah - I have tried a few things but obviously they haven't worked and I did do quite a bit of research before posting here but couldn't find anything. All I could find was hover options that would fill the shape and not resize it. I didn't think it was helpful to include code that didn't work. Apologies, just trying to ask for help. — Nathan Taylor, Jan 17 '22 at 17:17

score 0 · Answer 1 · answered Jan 17 '22 at 17:26

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>

SVG rect resizing on hover

1 Answers1