Bug 179724 – [SVG2] Styles not applied to targeted SVG elements when using `use`

• Component: SVG
• Status: NEW

[Peter Mouland]

Aim:
To create an SVG containing multiple elements and to re-use this SVG via the <use> element. 
I would then like to style each element differently e.g. different stroke/fill colours.

Problem
Chrome, Edge, ie11 and Opera allow me to do this, which is exactly what I would like, unfortunately within Safari (and Firefox) no visible SVG is rendered.

Resolution
My preference would be to have Firefox/Safari behave how Edge (and the others) do,
Please could you confirm this behaviour is a bug?

Links:
CodePen Demo: https://codepen.io/peter-mouland/pen/pdEMWZ
firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1415186
Edge bug: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14673751/

[Said Abou-Hallawa]

*** Bug 212902 has been marked as a duplicate of this bug. ***

[Said Abou-Hallawa]

*** Bug 212902 has been marked as a duplicate of this bug. ***

[Said Abou-Hallawa]

A reduced test case is: https://www.w3.org/TR/SVG2/images/struct/Use-changed-styles.svg.

[Brent Fulgham]

WebKit and Chrome produce identical rendering. Firefox does not.

[Ahmad Saleem]

Chrome Canary 145 and Firefox Nightly 148 are now matching but Safari 26.3 is outlier.

[Karl Dubost]

Created attachment 479240 [details]
rendering in safari, firefox, chrome

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="100" viewBox="0 0 200 100">
  <style type="text/css">
    circle          { stroke-opacity: 0.7; }
    .special circle { stroke: green; }
    use             { stroke: purple;
                      fill: orange; }
  </style>
  <g class="special" style="fill: blue">
     <circle id="c" cy="50" cx="50" r="40" stroke-width="20"/>
  </g>
  <use xlink:href="#c" x="100"/>
</svg>

[Karl Dubost]

This requires an architecture change. 


SVG document:

<style>
  .special circle { stroke: green; }
  use             { stroke: purple; fill: orange; }
</style>

<g class="special">
    <circle id="c" r="40" stroke-width="20" />
</g>

<use href="#c" x="100" />


The <use> element creates a hidden copy (shadow tree) of the circle:

Document tree:                    

<g class="special">               
  <circle id="c"/>                  
</g>                                  
<use href="#c"/>


Shadow tree (inside <use>):

  #shadow-root
      <use>
          <circle id="c"/>   This is the circle clone

The browser should ask: "Does .special circle match the clone circle?"
Looking at the clone's ancestors: <circle> → #shadow-root → <use>. There's no .special ancestor. No match. So the clone inherits stroke: purple from <use>. That's what Chrome and Firefox do.


WebKit needs to make document stylesheets visible to clone elements in the <use> shadow tree, so we can style them directly without the redirect.

[Radar WebKit Bug Importer]

<rdar://problem/175323353>

[Radar WebKit Bug Importer]

<rdar://problem/175323334>

[Karl Dubost]

*** Bug 249080 has been marked as a duplicate of this bug. ***