如何在 Firefox 上制作带有可见溢出的 SVG 笔画？

Question

也许这是一个错误，但请检查一下。 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" />

我发现当我的 CSS 选择器是直接的时，它可以工作。否则，无论我如何尝试限定符号以添加可见溢出属性，它都不起作用。

Answer 1

Firefox 实现了 SVG 2 <use> 元素。在 SVG 2 <use> 选择器 must not cross the shadow document boundary 中，即您不能将 CSS 选择器的一部分指向（或其父级），而另一部分指向 <use> 引用。

Chrome，Safari 和 Edge 可能会在某些时候更改以匹配 Firefox。

Answer 2

对于遇到此问题的任何人，这为我解决了

svg, symbol { overflow: visible; }

Updated codepen here

如何在 Firefox 上制作带有可见溢出的 SVG 笔画？

How to make SVG stroke with visible overflow on Firefox?

css

firefox

svg

stroke