html - svg tspan bounds out of line in IE -

html - svg tspan bounds out of line in IE -

i have 3 single-character tspan elements in svg:text element , in browsers when hover mouse on each 1 highlight , good. in ie (checked in both 9 , 10) bounds sec tspan start off center first quite easy user think clicking on first tspan while clicking on second.

here, image worth one thousand words , that. i've simplified illustration easier debugging. if cursor ends on protruding part of p, ie thinks user clicking on i.

the yellowish box shows area first ("p") tspan gets focus. reddish box shows area sec ("i") tspan gets focus.

<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>

the same overlap happens 3rd tspan blocking out half sec tspan, it's not in screenshot because on pages has display:none.

so, how can convince ie set right bounds around tspans? have abandon tspans altogether. effect want accomplish 3 single characters appear in far right of menu bar , if of them hidden via display:none, others duffle farther on right. current done text-anchor: end.

html css svg