我无法将svg：悬停工作

Question

我已经坐在这里2个小时，点击链接并在网上搜索以找到解决我问题的方法。问题是我无法将鼠标悬停在SVG对象上。

首先，我试图将悬停效果放在一个group（“ g”）上，但是我很快意识到它不起作用，因此我决定制作矩形（“ rect”）来遮盖我想要的区域徘徊。 这是CSS：

#ipad-box {
   fill: blue;
}

#ipad-box:hover {
   fill: red;
}

这是对象：

        <rect id="ipad-box" x="885.8" y="181.3" transform="matrix(0.9427 -0.3337 0.3337 0.9427 -72.968 368.1184)" class="st53" width="298.4" height="430.3"/>

这是整个svg ：（警告：很长） https://pastebin.com/wyJv29nZ

我想不起来我在做什么，如果有人愿意提供帮助，我将非常感谢