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

Question

>請參閱Codepen https://codepen.io/timbarden/pen/XWrBxev

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

我尝试过意志改变：转换，但除了重做整个模块之外，我还不知道要改变什么。

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