文本在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>

这个group(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位置设置为rect x + width并设置 text-anchor="end"