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

前端之家收集整理的这篇文章主要介绍了CSS中SVG“defs”标签的正确行为是什么?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
使用嵌入式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确实通过use标签将“fill:blue”规则应用于第二个rect(因此第一个rect是黑色,第二个是蓝色),而firefox不应用规则(两个rects保持黑色).

那是一个萤火虫吗?有没有我得不到的东西?或者标准是否说“defs tag应该阻止CSS选择器”?

解决方法

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

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

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

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

猜你在找的CSS相关文章