What's the correct behaviour of SVG "defs" tag in CSS? What's the correct behaviour of SVG "defs" tag in CSS? google-chrome google-chrome

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


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.