Css 为什么风格不应用于Firefox中的svg元素？

我想对SVG

元素中的SVG元素应用CSS样式。在Chrome和InternetExporer（11版）中，以下代码运行良好，而在Firefox中则不行。如何将样式应用于Firefox中

defs

中的SVG元素

<svg>
    <g id="symbolcontainer" class="green">
        <defs>
            <g id='mysymbol'>
                <defs>
                    <circle id="myCircle" r="2" cx="2" cy="2"/>
                </defs>
                <use href="#myCircle"/>
            </g>
        </defs>
        <use href="#mysymbol" />
    </g>
</svg>

而在chrome和Internet Explorer中，圆圈为绿色（应用了样式），在Firefox中为黑色（未应用样式）

请参阅并用此进行测试

---

我在stackoverflow上搜索了“svg firefox样式defs”，但没有找到我的问题的答案。

在svg 2中，如果有样式，则不应用样式

阴影树由

元素创建，由

元素指向的元素（及其子元素）的“阴影”组成

换句话说，如果您有一个复杂的选择器（一个包含2个或多个元素），其中一个元素从主文档中选择，而另一个元素在use元素的子元素中选择，则不会应用它

让我们看看您的选择器

• 符号容器位于主文档中
• mysymbol位于影子树中，它被克隆到
  元素中

因此，选择器在SVG2兼容的实现中不应执行任何操作

如果要应用样式，只需将选择器设置为一个或另一个零件，使其不会跨越边界。例如

#symbolcontainer.green{fill:green；}

#mysymbol{fill:green；}

在FF中对我有效，我假设svg的呈现方式可能略有不同，因此您的样式声明不正确？