SVG:<；使用>；不与chrome或IE10级联css

我想在我的文档中使用

，但我对级联类有问题

我有以下几点：

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

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

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

---

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

如果你颠倒规则的顺序会怎么样？对于支持CSS样式的用户代理，将引用元素概念性地深入克隆到未公开的DOM树中也会复制CSS级联产生的任何属性值（[CSS2]，第6章）在引用的元素及其内容上。CSS2选择器可以应用于原始（即引用）元素，因为它们是正式文档结构的一部分。CSS2选择器不能应用于（概念上）克隆的DOM树，因为它的内容不是正式文档结构的一部分。这里的错误是Firefox。这是一个已知的问题，有一个bugzilla bug在跟踪它。谢谢你，Anthony，Robert，我有必要学习级联风格。我将采用另一种方法，直接用JS克隆def。

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