如何以跨浏览器和双向友好的方式定位SVG文本元素？

Question

我想在RTL和LTR语言的svg rect元素的右下角放置一串文本。不幸的是，IE严格遵守text-anchor属性而不管文本方向如何，而Chrome，FF，Safari和Opera交换意义 RTL模式下的text-anchor: start和text-anchor: end。如何以跨浏览器和RTL兼容的方式正确定位文本？

LTR：http://jsfiddle.net/ybr1s4d4/（正确）

RTL：http://jsfiddle.net/ybr1s4d4/2/（不在IE9 +中工作，不关心IE8 - ）

Answer 1

对于IE，您不需要任何CSS规则（重新定义text-anchor），因此我们可以检测IE浏览器，如果它不是IE，只需插入规则（使用Javascript覆盖text-anchor）：

//if not IE, just insert the rule body[dir="rtl"] svg > text ...
if(!('ActiveXObject' in window)){
  document.styleSheets[0]
          .insertRule("body[dir='rtl'] svg > text { text-anchor: start;}",0);    
}

Updated demo

注意我认为如果不使用脚本就无法解决这个问题。