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

文本在SVG中相对于父G对齐

1 个答案: