2

嗯。既然我已经弄清楚了如何使用 TSPAN 动态地包装 SVG 文本（请参阅SVG 文本中的自动换行），但尝试对其进行动画处理让我很难过。我基于 Mike Bostock 的 Zoomable Treemap 示例。

我的文本换行代码是这样调用的：

    g.append("text")
     .attr("dy", ".75em")
     .text(function(d) { return d.name; })
 //  .call(text)                // Mike's line
     .each(function (d,i) {     // My line
         wraptorect(this,this.previousSibling,6,2,2);
     });

将旧的 Mike 线放回去可以正常工作，但会删除文本换行：

function text(text) {
  text.attr("x", function(d) { return x(d.x) + 6; })
      .attr("y", function(d) { return y(d.y) + 6; });
}

我原以为你只需要为父 TEXT 元素设置动画，但我让文本在 Chrome 中向奇怪的方向移动（在 IE9 中甚至更糟糕的行为，其中文本还不想换行）。我怀疑这与具有 x 属性的 TSPAN 有关，但看不到除此之外的前进方向......

单线

<text dy=".75em" x="252" y="2">Other purposes which could be interesting</text>

折线

<text dy=".75em" x="252" y="2">
  <tspan x="252" dy="15">Other purposes </tspan>
  <tspan x="252" dy="15">which could be </tspan>
  <tspan x="252" dy="15">interesting </tspan>
</text>

JS 代码很长，所以这里是小提琴链接：http: //jsfiddle.net/gHdR6/6/

4

1 回答 1

3

如果 TSPAN 是绝对定位的（即它们具有 x 和/或 y 属性），那么您不能通过移动父 TEXT 来移动。您可以 (a) 相对定位它们（​​使用 dx 和 dy），或 (b) 通过对 TEXT 或包装器 G 使用转换来移动整个文本块。我发现 IE 和 Chrome 呈现字体宽度的方式不一致，所以使用（b）效果良好。

有关更新的演示，请参阅http://jsfiddle.net/gHdR6/15/。这是有效的SVG结构：

<text transform="translate(772,439)">
    <tspan x="0" dy="15">Transport and </tspan>
    <tspan x="0" dy="15">communication </tspan>
</text>

然后，您的缩放（或动画）代码需要更新这些节点的平移，而不是 x 和 y。

于 2014-04-09T00:21:52.370 回答