使用Webkit浏览器切换SVG模式填充问题

Question

我遇到了Webkit浏览器（例如Chrome，Safari）和更改SVG对象的图案填充问题。下面的示例尝试在悬停时在纯红色和Google徽标之间切换矩形的填充：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="275" height="95">
            <image xlink:href="http://www.google.com/intl/en_com/images/srpr/logo3w.png" x="0" y="0" width="275" height="95" />
        </pattern>
    </defs>
    <rect id="rect" width="550" height="190" style="fill:url(#img1);stroke-width:1;stroke:rgb(0,0,0)">
        <set attributeName="fill" from="url(#img1)" to="red" begin="mouseover" end="mouseout"/>
    </rect>
</svg>

在Chrome / Safari中，矩形正确填充加载了Google徽标图案的矩形。鼠标悬停时，矩形填充切换为红色。在鼠标移出时，填充显示为白色而不是交换回Google徽标。