SVG中的“defs”标签在CSS中的正确行为是什么？

Question

当我们写下这段包含嵌入式 CSS 的 SVG 代码时：

<?xml version="1.0" encoding="utf-8"?>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 100 100">
    <style>
        defs rect
        {
            fill:           blue;
        }
    </style>
    <defs>
        <rect id="rectangle" x="5" y="10" width="3" height="3"/>
    </defs>

    <rect x="5" y="5" width="3" height="3"/>
    <use xlink:href="#rectangle"/>
</svg>

然后，Chrome通过使用标记将“fill：blue”规则应用于第二个矩形（因此第一个矩形为黑色，第二个为蓝色），而Firefox不应用该规则（两个矩形仍然为黑色）。

这是火狐的问题吗？还是有些地方我理解有误？或者标准规定“defs标记应该阻止CSS选择器”？

- Xenos

---

使用defs作为选择器就像在HTML中使用title一样。通常情况下，您不会这样做，因为defs只是一个逻辑容器，而不是您通常会样式化的块。如果这是一个错误，那肯定是可以避免的。defs中的元素只有在具有id时才有用，因为它们需要在其他地方引用才能发挥作用，所以您始终可以使用其id引用这样的元素。 - helderdarocha

@helderarocha 好的，对于 #id 和 .class 没问题，但如果我想根据节点名称应用规则怎么办，就像这里一样？ 好吧，我会把它视为错误，然后向 Firebug 报告。 - Xenos

如果只使用id或内联属性文件，它可以工作，但问题更像是：为什么它也要填充<defs>？http://codepen.io/anon/pen/uoqwr/ - G-Cyrillus

我不明白为什么 defs rect 应该填充 defs？它会填充 defs 内的所有矩形。如果我有一个在外面的矩形，不想让它被填充，我可以使用 defs rect。 或者你是指另一种方式的“fill”吗？ - Xenos

Answer 1

实际上这是Firefox的一个bug。

规则适用于defs rect元素，但当use标签克隆defs rect时，规则就不适用了。将defs替换为g标签可以显示填充的defs rect；但规则不适用于“生成的克隆”。

正确的行为应该像Chrome一样，填充use生成的克隆；firefox错误地未填充use-克隆版本的defs rect。

有关更多说明，请参见https://bugzilla.mozilla.org/show_bug.cgi?id=997362#c4。

- Xenos