当您更改指针事件时，Svg texpath将在firefox中消失

Question

document.getElementById('frame-5416779E-782A-462E-AEC1-2FBCA08DAF42').onmouseover = function(){
this.style.pointerEvents = 'all';
};

<div id="frame-5416779E-782A-462E-AEC1-2FBCA08DAF42">
<svg style="width: 437.953px; height: 45.7323px; overflow:visible;" viewBox="0 0 437.9527559055118 45.73228346456693">
<text width="100%" height="100%">
<textPath width="100%" height="100%" href="#00d08f3b-2fa0-485e-acb6-f59b8384bbd4">
<tspan xmlns="http://ns.adobe.com/textLayout/2008" color="#b49d5b" fontsize="11">TEST</tspan> 
</textPath>
</text>
<path id="00d08f3b-2fa0-485e-acb6-f59b8384bbd4" d="M0 10 L 100 10" stroke="transparent" stroke-width="0px" fill="transparent"></path>
</svg>
</div>

这在所有浏览器中都有效，如果你将"TEST"指针事件被添加，但什么也没发生。如果在firefox中执行相同操作，则文本将消失。

现在奇怪的是…如果你进入元素检查器并切换SVG的溢出CSS ..它神奇地再现了。

这是firefox的bug吗?有解决方法吗?我必须能够打开/关闭可编辑svg元素的指针事件(这只是整个的一小部分)

Answer 1

这是Firefox中的一个bug。这个问题现在已经修复了，将会在Firefox 87中出现。

与此同时，这里有一个解决方法。与其将路径设置为transparent，不如将其设置为<defs>元素的子元素。

我也删除了其他一些无意义的属性。

document.getElementById('frame-5416779E-782A-462E-AEC1-2FBCA08DAF42').onmouseover = function(){
this.style.pointerEvents = 'all';
};

<div id="frame-5416779E-782A-462E-AEC1-2FBCA08DAF42">
<svg style="width: 437.953px; height: 45.7323px; overflow:visible;" viewBox="0 0 437.9527559055118 45.73228346456693">
<text>
<textPath href="#00d08f3b-2fa0-485e-acb6-f59b8384bbd4">
<tspan xmlns="http://ns.adobe.com/textLayout/2008" color="#b49d5b" fontsize="11">TEST</tspan> 
</textPath>
</text>
<defs>
<path id="00d08f3b-2fa0-485e-acb6-f59b8384bbd4" d="M0 10 L 100 10"/>
</defs>
</svg>
</div>