What's the correct behaviour of SVG “defs” tag in CSS?

问题

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

回答1:

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.

来源：https://stackoverflow.com/questions/23117533/whats-the-correct-behaviour-of-svg-defs-tag-in-css

标签

css