javascript - 文本相对于 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"