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确实应用＆＃34;填充：蓝色＆＃34;通过use标签规则到第二个rect（所以第一个rect是黑色，第二个是蓝色），而 firefox不应用规则（两个rects保持黑色）。

那是一个萤火虫吗？有什么东西我不能得到吗？或者标准说'＃34; defs标签应该阻止CSS选择器＆＃34;？

Answer 1

这实际上是Firefox的一个错误。

规则适用于defs rect元素，但当use标记克隆defs rect时，它们不适用。用defs标记替换g表示defs rect已填满;但规则不适用于“生成的克隆”。

正确行为是Chrome的一个，填充使用生成的克隆; 错误地没有填充defs rect的use-cloned版本。

有关详细说明，请参阅https://bugzilla.mozilla.org/show_bug.cgi?id=997362#c4。

SVG＆＃34; defs＆＃34;的正确行为是什么？ CSS中的标签？

1 个答案: