SVG rect 在悬停时调整大小答案

【问题标题】：SVG rect resizing on hoverSVG rect 在悬停时调整大小
【发布时间】：2022-01-18 01:26:40
【问题描述】：

我正在尝试在悬停时更改 svg 中矩形的高度。我一生都无法弄清楚这一点，我希望得到一些帮助。这是一个非常简单的 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>

我希望“红色”矩形的大小在悬停时平滑过渡到“小红色”的大小，然后在不悬停时平滑过渡回来。理想情况下，我希望这一切都发生在 SVG 中。任何人都可以帮助或指出正确的方向吗？

【问题讨论】：

stackoverflow.com/questions/22088987/…
是的 - 我已经尝试了一些东西，但显然它们没有奏效，我在发帖之前做了相当多的研究，但找不到任何东西。我能找到的只是悬停选项，可以填充形状而不是调整它的大小。我认为包含不起作用的代码没有帮助。抱歉，只是想寻求帮助。
是的，包含不起作用的代码会很有帮助。

标签： css svg hover

【解决方案1】：

您不能使用 CSS 影响 SVG 中的 width/height 或 rect ，但您可以将 transform 垂直到所需的高度。

* {
  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>

【讨论】：