"text长度"Internet Explorer中svg文本元素悬停时的更改

"textLength" changes on hover for svg text elements in Internet Explorer

本文关键字：quot 悬停 元素 长度 text Internet Explorer svg 文本      更新时间：2023-09-26

我正在为网站布局使用svg文本元素，并更改textLength属性以使菜单中的所有菜单项具有相同的长度。（当您更改文本长度时，间距会自动调整，字母保持其大小）

<div class="menu-item">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <text class="hover-black" lengthAdjust="spacing" fill="black">AGENDA</text>
        </svg>
</div>

"textLength"和定位是在JavaScript中完成的。

这一切都很好，只是在Internet Explorer中，当我将鼠标悬停在菜单文本上时，文本长度属性似乎会被删除，而我悬停在上面的svg文本会以标准间距向后翻转。

CSS和JS中都没有设置悬停。。。

也许有人有主意，非常感谢！

编辑：解决了！抱歉打扰你们了。我发现了一个：

.menu-item { 
    &:hover {
        cursor: pointer
    }  
}

我在css中忽略了这一点。似乎是IE中的一个错误。

尝试将style="pointer-events:none"添加到实际的文本标记中。这至少应该在IE11中解决它。我遇到了一个类似的问题，IE在SVG中使用lenghtAdjust时表现得很奇怪。

所以你总的来说，它看起来是这样的：

<div class="menu-item">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <text class="hover-black" x="30" y="30" textLength="250" fill="black" style="pointer-events:none">AGENDA</text>
      </svg>
</div>

我试过在课堂上这样做，但也不起作用。只有当我将它作为内联CSS添加到文本标记时。

对我来说，cursor:pointer仍然很奇怪。要重现这个问题，请尝试双击IE中的文本。它会跳到右边或左边。如果这是一个导航项目，那么你需要在文本下面做一个活动链接（rect maybe？），并且pointer-events:none已经允许你点击文本。

相关文章：