SVG Fill not working within symbol

RESOLVED DUPLICATE of bug 265894

Status

()

Firefox
Untriaged
RESOLVED DUPLICATE of bug 265894
3 years ago
2 months ago

People

(Reporter: tobias.reich.ich, Unassigned)

Tracking

33 Branch
x86
Mac OS X
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(1 attachment)

(Reporter)

Description

3 years ago
Created attachment 8531565 [details]
Safari Firefox Fill.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.1.25 (KHTML, like Gecko) Version/8.0 Safari/600.1.25

Steps to reproduce:

Demo: http://codepen.io/electerious/pen/yyYeBW

1. Add the following Inline-SVG:
<svg class="skews" xmlns="http://www.w3.org/2000/svg">
	<symbol viewBox="0 0 2 1" preserveAspectRatio="none" id="skew_top">
    <polygon points="0,1 1,1 0,0" class="light" />
    <polygon points="1,1 2,1 2,0" class="dark" />
	</symbol>
</svg>

2. Reference to this element using:
<svg class="skew"><use xlink:href="#skew_top" /></svg>

3. Now it is possible to fill the elements with the class .light and .dark using the following CSS:
.skews .light { fill: #eee; }
.skews .dark { fill: #444; }
This works fine in the latest Versions of Apple Safari, Google Chrome and Opera. However, the mentioned CSS has no effect in Firefox. In Firefox every SVG element remains black.


Actual results:

The elements with the class .light and .dark are filled black when using a reference:
<svg class="skew"><use xlink:href="#skew_top" /></svg>


Expected results:

The elements with the class .light and .dark should be colored #eee and #444.

In order to get it working in Firefox, you need to change the CSS selector to select the reference:

.skew .light { fill: #eee; }
.skew .dark { fill: #444; }

(.skew instead of .skews)
(Reporter)

Updated

3 years ago

Updated

3 years ago
Status: UNCONFIRMED → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 265894

Comment 2

2 months ago
We should not match the these two rules
.skews .light { fill: #eee; }
.skews .dark { fill: #444; }
since only <symbol id="skew_top"> is cloned into the use-element shadow tree, whereas its parent(<svg class="skews">) is not cloned into the shadow tree. So. current FF behavior is correct.(Please refer to my comments in bug 997362)

But! in the comment 1, you said change .skews to .skew make FF work, which is essentially a bug:
.skew .light { fill: #eee; }
.skew .dark { fill: #444; }

We should not cross the boundary of shadow tree while matching complex selector with descedant combinator(Please refers to #2 in Bug 265894 comment 37). This is a bug that I am going to fix in bug 265894
You need to log in before you can comment on or make changes to this bug.