仅Safari存在：鼠标移出SVG元素后hover的transform效果未恢复

该现象是Safari浏览器对SVG内部元素的:hover伪类处理存在已知兼容缺陷导致：当SVG内部子元素未显式声明初始transform属性时，:hover触发的变换规则在鼠标移出后无法自动回滚到初始状态。Chrome、Edge使用的Blink内核针对该场景做了额外兼容性处理，因此运行正常。

以下两种方案均可解决该问题：

• 方案1：给目标SVG元素显式设置初始transform属性
  给#rect补充默认的缩放初始值，让Safari可以正确识别状态切换的前后样式规则：

<html>
        <head>  
            <style>
                #rect{
                    transform: scale(1);
                }
                #rect:hover{
                    transform: scale(0.9);
                }
            </style>
        </head>
    
        <body>
            <div id="divRect">
                <svg width="400" height="110">
                <rect id="rect" width="300" height="100" style="fill:rgb(0,0,255)" />
                </svg>
            </div>
        </body>
    </html>

• 方案2：将:hover伪类绑定到外层非SVG元素上
  不直接给SVG内部的rect元素绑定hover规则，改绑定到外层的普通HTML元素上，规避Safari对SVG子元素的伪类处理缺陷：

<html>
        <head>  
            <style>
                #divRect:hover #rect{
                    transform: scale(0.9);
                }
            </style>
        </head>
    
        <body>
            <div id="divRect">
                <svg width="400" height="110">
                <rect id="rect" width="300" height="100" style="fill:rgb(0,0,255)" />
                </svg>
            </div>
        </body>
    </html>

内容的提问来源于stack exchange，提问作者Paddy