Closed
Bug 1377435
Opened 7 years ago
Closed 7 years ago
svg use css selectors not applied correctly
Categories
(Core :: SVG, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: rg.robingranger, Unassigned)
Details
Attachments
(1 file)
|
546 bytes,
text/html
|
Details |
User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36 Steps to reproduce: 1. Open Firefox 2. Enter the following link in the address bar : https://codepen.io/anon/pen/MoQZXG OR 1. Open attached file with Firefox Actual results: Firefox displays a BLACK rectangle Expected results: Firefox should display a RED rectangle. (open link in Chrome, IE, Edge, ...) (css selectors are not applied correctly with <svg> <symbol> and <use> elements)
|
||
Updated•7 years ago
|
Component: Untriaged → SVG
Product: Firefox → Core
|
||
Comment 1•7 years ago
|
||
I'm not sure this is valid. The outer symbol element is outside the shadow DOM of the inner symbol when it's cloned and therefore its CSS does not apply does it?
Flags: needinfo?(amelia.bellamy.royds)
|
Reporter | |
Comment 2•7 years ago
|
||
Well, it passes the w3c markup validator (if you add <!doctype html>). Moreover, this is the output I get from the svg-sprite-loader for Webpack : https://github.com/kisenka/svg-sprite-loader This loader prefixes the inner <style> selectors with the outer symbol element's id (which is the name of the file I give them as input). So, I don't know if they are wrong in doing so, or if Firefox is, but this markup works on IE11, Chrome and Edge (I didn't test it on other browsers).
|
||
Comment 3•7 years ago
|
||
This is one of the cases that would be covered under the breaking change from the SVG 1 style-matching model to SVG 2: https://www.w3.org/TR/SVG2/struct.html#UseStyleInheritance Under the SVG 1 model, the _cascaded_ styles are cloned (all the styles set directly on the element, which may be "inherit" or "initial"), regardless of what selector rules are used. Under the SVG 2 / Shadow DOM model, the shadow DOM elements are styled separately. Because the <rect class="red"> that is cloned as part of <symbol id="circle"> is no longer a descendent of an element that matches #icons_list. We were willing to make this breaking change in the spec because Firefox had never implemented the SVG 1 model anyway, and because there was a desire from all browsers to make SVG <use> more compatible with the HTML web components shadow DOM model. However, other browsers have not yet changed to match. To robingranger: The webpack plug-in you're using assumes that each of your SVG files is a separate drawing, which you want to compile into a set of symbols. It then adds the <symbol> wrapper and id, with the assumption that you would be using the entire graphic as <use xlink:href="#icons_list"/>. Since you've already got <symbol>s in your file, this script is confusing things considerably. Although <symbol> inside of <symbol> is technically valid SVG, I can't think of any case where it would be useful in practice.
Flags: needinfo?(amelia.bellamy.royds)
|
|
Reporter | |
Comment 4•7 years ago
|
||
Ok, I'll try to take a deeper look to understand why we are bundling our <svg> icons this way. We are probably doing something wrong ^^. Thanks for your input !
|
|
||
Comment 5•7 years ago
|
||
This is invalid then as we're doing what the SVG 2 specification says.
Status: UNCONFIRMED → RESOLVED
Closed: 7 years ago
Resolution: --- → INVALID
You need to log in
before you can comment on or make changes to this bug.
Description
•