什么是SVG的正确行为“defs”标签在CSS？ [英] What's the correct behaviour of SVG "defs" tag in CSS?

问题描述

当使用嵌入式CSS编写此SVG代码时：

 <？xml version =1.0encoding = utf-8？> 
 
< svg xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/xlinkversion = 1.1viewBox =0 0 100 100> 
< style> 
 defs rect 
 {
 fill：blue; 
} 
< / style> 
< defs> 
< rect id =rectanglex =5y =10width =3height =3/> 
< / defs> 
 
< rect x =5y =5width =3height =3/> 
< use xlink：href =＃rectangle/> 
< / svg> 
  

然后， Chrome会将fill：blue第二个rect通过使用标签（所以第一个rect是黑色，第二个是蓝色），而 firefox不应用规则（两个rects保持黑色）。

这是火炬吗？有没有我不能得到的东西？或者标准说defs标签应该阻止CSS选择器？

解决方案

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

规则适用于 defs rect 元素，但不适用于 use 标记克隆 defs rect 。
用 g 标签替换 defs ，表明 defs rect 已填写;但规则不适用于 - 生成的克隆。

正确的行为是Chrome的

请参阅 https://bugzilla.mozilla.org/show_bug.cgi?id=997362#c4 了解更多说明。

When one write this SVG code, with embedded CSS:

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

Then, Chrome does apply the "fill:blue" rule to the second rect through the use tag (so first rect is black, second is blue), whereas firefox does not apply the rule (both rects remain black).

Is that a firebug? Is there something I don't get? Or does the standard say "defs tag should block CSS selectors"?

解决方案

It's actually a bug from Firefox.

Rules apply to the defs rect elements, but they don't apply when the use tag clones the defs rect. Replacing the defs with a g tag shows that the defs rect is filled; but the rules are not applied to the "-generated clone".

Correct behavior is Chrome's one, filling the use-generated clone; use-cloned version of the defs rect is wrongly not filled by firefox.

See https://bugzilla.mozilla.org/show_bug.cgi?id=997362#c4 for more explanations.

这篇关于什么是SVG的正确行为“defs”标签在CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！