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

【问题标题】：SVG not appearing in Firefox when using transform and visibility CSS properties使用变换和可见性 CSS 属性时 SVG 未出现在 Firefox 中
【发布时间】：2020-01-17 00:56:26
【问题描述】：

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

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

我尝试过 will-change: transform，但除了重做整个模块之外，我对要更改的内容感到困惑。

【问题讨论】：

使用 svg 转换而不是 css 转换

标签： css firefox svg

【解决方案1】：

您可以将pointer-events:none; 用于.item__slice，将pointer-events: all; 用于.item__slice--shape，而不是使用visibility: hidden;。看到一个更高级的演示来了解您到底想要实现什么会很有趣。

.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>

【讨论】：