时间戳

首页 > 解决方案 > 当您更改指针事件时，Svg texpath 在 Firefox 中消失

svg - 当您更改指针事件时，Svg texpath 在 Firefox 中消失

问题描述

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中的错误吗？任何解决方法？我必须能够打开/关闭可编辑 svg 元素的指针事件（这只是整体的一小部分）

标签： svgfirefox

解决方案

这是 Firefox 中的一个错误。现在已经修复，修复将出现在 Firefox 87 中。

与此同时，这里有一个解决方法。与其将路径设置为透明，不如将其设置为元素的子<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>

推荐阅读