嗯 现在，我已经弄清楚了如何使用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/
如果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。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句