css - 使用变换和可见性 CSS 属性时，SVG 未出现在 Firefox 中

Question

请参阅 Codepen https://codepen.io/timbarden/pen/XWrBxev

这是问题的精简版。 visibility 属性用于允许光标仅悬停在形状上。当应用 transform 属性时，SVG 在 Firefox 中消失。在 Chrome 甚至 IE 中都可以正常工作。早在 2017 年就建在一个网站上，一切都很好，但此后出现了这个问题。当应用 transform 属性时，SVG 在 Firefox 中消失。

我试过 will-change: transform 但除了重做整个模块之外我不知道要改变什么。

Answer 1

而不是使用 visibility: hidden; 你可以使用 pointer-events:none; 用于 .item__slice 和 pointer-events : all;对于 .item__slice--shape。看到更高级的演示以了解您究竟想要实现什么会很有趣。

.item__slice {
  fill: red;
  cursor: pointer;
  pointer-events:none;
   -webkit-transform: translateX(1em);
          transform: translateX(1em);

}
.item__slice--shape {
  pointer-events: all;
}

<svg style="visibility: hidden; position: absolute;">
  <symbol id="icon_slice" viewBox="0 0 163.76 189.41"><path d="M163.76,94.55,0,0V189.41a190.31,190.31,0,0,0,133.75-56,192.62,192.62,0,0,0,29.94-38.71Z"/></symbol>
</svg>
  
<svg class="item__slice icon--slice">
	<use class="item__slice--shape" href='#icon_slice' x='0' y='0'/>
</svg>