文本相对于 SVG 中的父项 G 右对齐

text align right relatively to parent G in SVG

本文关键字：右对齐 相对于 SVG 文本      更新时间：2023-09-26

我想创建 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的右侧？

谢谢！

将

文本的 x 位置设置为矩形 x + 宽度并设置text-anchor="end"

相关文章：