svg use elements are not show in firefox

[nidi3]

https://jsfiddle.net/7hsnzrpa/1/

In Chrome, the circle is visible, in Firefox not. (MacOS)

[graymatter00]

Tested the jsfiddle sample on Windows and Android: Works fine in Chrome and Edge. Produced the same issue with Firefox.

Removing the reference to css-reset fixes the issue. I dug around but can't find the cause.

[UniquePixels]

I was able to figure out a bit, but not a solution. I determined that the issue is that the cx and cy attributes are getting overwritten, similar to how image dimensions would get overwritten if the img tag was not excluded. I believe that this is occurring because the circle is being rendered in shadow dom and the ’svg *’ selector is not being recognized there. If you put circle in the exclusion list, eveyrhing works, but listing all the possible svg elements in there would make it very long and not a great solution IMO. However, I have found no other way to target this wierd shaddow dom rendering.

…

On May 15, 2024, at 12:23 AM, Tony Gray ***@***.***> wrote: Tested the jsfiddle sample on Windows and Android: Works fine in Chrome and Edge. Produced the same issue with Firefox. Removing the reference to css-reset fixes the issue. I dug around but can't find the cause. — Reply to this email directly, view it on GitHub <#88 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A6IUNUKHFBAFMLH45ZVRRU3ZCLWL7AVCNFSM6AAAAABHWOZFXKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMJRGYYDSNJYGU>. You are receiving this because you are subscribed to this thread.

[graymatter00]

Not a solution, but a workaround using symbol instead of defs...

<link rel="stylesheet" href="https://unpkg.com/the-new-css-reset@1.11.2/css/reset.css" />
<svg hidden>
  <symbol id="my-symbol">
    <circle cx="10" cy="10" r="5" />
  </symbol>
</svg>

<svg>
  <use href="#my-symbol" />
</svg>

This seems to work fine in Firefox on Windows.

[dergachevm]

Same bug in FF and Chrome

Solution - explicitly remove path (and other svg tags) from all: unset;.

❌ Svg with use hidden:

*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}

✅ Svg with use visible:

*:where(:not(html, iframe, canvas, img, svg, video, audio, path, g, use, defs):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}