Question

我正在使用svg-text-elements作为网站布局，我正在更改textLength属性，以使菜单中的菜单项具有相同的长度。（当您更改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中，当我将鼠标悬停在菜单文本上时，textLength-Attributs似乎被删除了，而我正在盘旋的svg文本以标准间距翻转回来。

对于悬停而言，CSS和JS中都没有设置......

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

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

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

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

Answer 1

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

所以你完全看起来像这样：

<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中的文本。它会跳到右边或左边。如果这是一个导航项，那么你需要在文本下方做一个活动链接（可能是？），pointer-events:none已经允许你点击文本。

“textLength”在Internet Explorer中为svg文本元素悬停时发生更改

1 个答案: