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

查看:977
本文介绍了什么是SVG的正确行为“defs”标签在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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆