使用 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 徽标图案正确填充矩形。鼠标悬停时，矩形填充切换为红色。鼠标移出时，填充显示为白色，而不是交换回谷歌徽标。