svg tspan在IE中超出界限

Question

我在svg：text元素中有三个单字符tspan元素，在大多数浏览器中，当我将鼠标悬停在每个上面时，它们都会突出显示并且一切都很好。但是在IE中（在9和10中都检查过），第二个tspan的边界从第一个开始就偏离中心，因此用户很容易认为他们在点击第一个tspan时实际点击了第二个。“ p>

在这里，一张图片胜过千言万语。我已经简化了示例以便于调试。如果光标最终位于P的突出部分，则IE认为用户正在点击I。

黄色框显示第一个（＆＃34; P＆＃34;）tspan获得焦点的区域。 红色框显示第二个（＆＃34; I＆＃34;）tspan获得焦点的区域。

<text class="titlebar_icon right" ng-attr-x="{{icon_x}}" y="49" x="1200">
    <tspan id="print" class="print" ng-click="onClick('print')">P</tspan>
    <tspan id="help" class="help" ng-click="onClick('help')">I</tspan>
    <tspan id="logo" class="embedded_logo" ng-click="onClick('home')">X</tspan>
</text>

同样的重叠发生在第三个tspan阻挡了第二个tspan的一半，它不在截图中，因为在某些页面上它有display:none。

那么，我如何说服IE在tspans周围设置正确的界限呢？我是否必须放弃tspans。我希望实现的效果是在菜单栏的最右侧显示三个单个字符，如果其中任何一个字符通过display:none隐藏，则其他字符会进一步向右移动。目前由text-anchor: end完成。