SVG中的父G相對於文本對齊

Question

我想創建SVG工具提示，但是當我想將文本對齊到正確時我有問題。

<g class="svgTootlip"> 
    <rect class="ttip" x="-100" y="-50" width="100" height="50" rx="2" ry="2"></rect> 
    <text x="-90" y="-40"> 
     4 Dec 2014 
    </text> 
</g> 

此組（d3TtipG）越大SVG文件的一部分，並且被變換取決於鼠標位置的。

JS：

d3Container.on('mousemove', function() { 
    cords = d3.mouse(this); 
    tr_x = cords[0]; 
    tr_y = cords[1]; 
    if (tr_x > 23 && tr_y > 23) { 
     ... 
     d3TtipG.attr({ 
      style: 'transform: translate(' + ((tr_x < 560) ? tr_x + 110 : tr_x - 15) + 'px, ' + ((tr_y < 215) ? tr_y + 55 : tr_y - 10) + 'px)' 
     }); 
    } else { 
     hideViewFinder(); 
    } 
}); 

是否有一個跨瀏覽器的方式來強制本文堅持對rect或g右側？

謝謝！

Answer 1

將文本的x位置設置爲矩形x +寬度並設置text-anchor="end"