How to make SVG stroke with visible overflow on Firefox?

Question

Maybe it's a bug, but check this out. https://codepen.io/Firsh/pen/LegGQq

 /* Only these work:*/ /* symbol{ overflow: visible; } */ /* #circle-symbol{ overflow:visible; } */ /* NO matter how I target it, it doesn't work... */ .product symbol, svg symbol, .definitions symbol { overflow: visible; } .my-circle{ overflow: visible; fill:red; stroke-width:15px; stroke:#000; } .definitions{ position:absolute; } 

 <br>This is cut off on Firefox only:<br><br> <div class="product"> <svg viewBox="0 0 90 90" width="90" height="90" class="my-circle" style=""> <use xlink:href="#circle-symbol"></use> </svg> <svg xmlns="http://www.w3.org/2000/svg" class="definitions"> <defs> <symbol id="circle-symbol" viewBox="0 0 90 90"> <path fill-rule="evenodd" clip-rule="evenodd" d="M76.85,13.2C85.616,21.967,90,32.567,90,45c0,12.434-4.384,23.017-13.15,31.75 C68.05,85.583,57.434,90,45,90c-12.367,0-22.967-4.417-31.8-13.25C4.4,68.017,0,57.434,0,45c0-12.433,4.4-23.033,13.2-31.8 C22.033,4.4,32.633,0,45,0C57.434,0,68.05,4.4,76.85,13.2z"></path> </symbol> </defs> </svg> </div> <br>This is how it should look like (Chrome, Edge):<br> <img src="https://i.snag.gy/cxM306.jpg" width="109" height="108" /> 

I've found that when my CSS selector is direct, it works. Otherwise, no matter how I try to qualify symbol to add the visible overflow property, it doesn't work.

Answer 1

Firefox implements SVG 2 <use> elements. In SVG 2 <use> selectors must not cross the shadow document boundary ie you can't point part of the CSS selector to the (or its parents) and the other part to the <use> reference.

Chrome, Safari and Edge will likely change to match Firefox at some point.

Answer 2

For anyone having this problem, this solved it for me

svg, symbol { overflow: visible; }

Updated codepen here