Question

也许这是一个错误，但请检查一下。 https://codepen.io/Firsh/pen/LegGQq

＆＃13;

/* 
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;
}

＆＃13;

<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" />

＆＃13;

我发现当我的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; }

https://mxtoolbox.com

如何在Firefox上使用可见溢出进行SVG笔划？

2 个答案: