svg - 移动多行文本元素

Question

我正在尝试移动以下多行文本元素：

<text x="80" y="187.5" text-anchor="middle" stroke="#ffffff" fill="#ffffff" font-weight="bold" id="selector" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; ">
    <tspan dy="-13.203125" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Line 1</tspan>
    <tspan dy="19.2" x="80" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Line 2</tspan>
    <tspan dy="19.2" x="80" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Line 3</tspan>
</text>

我使用以下代码来移动文本：

var tTargetDesc = d3.select("#selector").transition()
    .duration(750)
    .attr("x", function(d){
        return width / 16;
    });

但只有第一行被移动。我必须一个一个地移动每个 tspan 吗？

Answer 1

如果您改用该transform属性，它会起作用：

var tTargetDesc = d3.select("#selector").transition()
    .duration(750)
    .attr("transform", function(d){
        return "translate(" + (width / 16) + ",0)";
    });

Answer 2

由于坐标空间的问题，翻译对我不起作用。这是我最终做的

 var children = txtElement.children;
    for (var i = 0; i < children.length; i++) {
        var textChild = children[i];           
        textChild.setAttribute("x", _X);

    }