SVG：<use>不用chrome或IE10级联css </use>

Question

我想在我的文档中使用<use>，但我遇到级联类的问题。

我有以下svg：

<svg>
    <defs>
        <rect id="pattern" class="color-pattern" x="25" y="25" width="50" height="50"/>
    </defs>
    <g class="color-object">
        <use xlink:href="#pattern"/>
    </g>
</svg>

使用以下css：

.color-pattern {fill:red;}
.color-object .color-pattern {fill:blue;}

JsFiddle

使用firefox，矩形为蓝色（我似乎是正确的），使用IE10或Chrome，矩形为红色。

这是一个问题吗？我如何才能在三个浏览器上获得正确的结果？

感谢您的回答，对不起我的英语。