css - SVG：不使用 chrome 或 IE10 级联 css

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;}

提琴手

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

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

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