If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

SVG use instances do not inherit CSS-specified overrides of their source's attributes.

NEW
Unassigned

Status

()

Core
SVG
P2
normal
24 days ago
a day ago

People

(Reporter: Thomas Wisniewski, Unassigned)

Tracking

(Depends on: 1 bug)

Trunk
Points:
---
Bug Flags:
webcompat ?

Firefox Tracking Flags

(firefox57 affected)

Details

(Whiteboard: [webcompat])

Attachments

(1 attachment)

(Reporter)

Description

24 days ago
Created attachment 8902754 [details]
testcase.html

In the attached testcase, the <symbol> has both the attribute fill="none" and the CSS fill:red. However, the red does not apply to <use> instances, when it should (all other browsers behave this way). As such the <use> instances end up with no fill, rather than a red fill, unlike in other browsers (Edge, Chrome, Safari).

The reason seems to be that since the CSS is applied specifically to the original symbol's path, it is not copied over to the instances as well. If I add in an old-school CSS hack (as in the comment in the attached test-case), then Firefox will also propagate the fill accordingly.

I'm unsure if this is an edge-case missed in bug 265894 or not, but I thought I'd mention it just in case.
Flags: webcompat?

Comment 1

24 days ago
I don't think this is valid per https://www.w3.org/TR/SVG2/struct.html#UseStyleInheritance and I don't think any other UA has implemented this part of SVG 2 yet either. Someone has to be first and this time it's us.
Priority: -- → P2
Depends on: 376027
You need to log in before you can comment on or make changes to this bug.