Question

我一直致力于创建一个显示每月进度的现金温度计。我遇到SVG文本换行问题，可以使用一些帮助。动画和其他一切都已设置，我只是无法正确地包装文本。任何有关这方面的帮助将不胜感激。下面是我的代码的JS小提琴链接。您会注意到文本被删除并且无法正确显示。

https://jsfiddle.net/corcorancr/4pto1wm5/1/

 //-- Draw Goal line
if (this.currentProgress >= this.currentGoal) {
  this.drawTick(maxTemp, "Goal of " + this.currentGoal + " Reached! " + this.currentProgress + " receieved!", "Black", 0, width, tubeWidth, tubeBorderColor, scale, svg);
} else {
  this.drawTick(maxTemp + 3, "Goal: " + this.currentGoal, "black", 0, width, tubeWidth, "Black", scale, svg);
  this.drawTick(percentageOfGoal, "Current: " + this.currentProgress, this.getMercuryColor(t), 0, width, tubeWidth, tubeBorderColor, scale, svg);
}

Answer 1

您需要将文本元素包装在tspan标记中。我使用了已存在的解决方案中的wrap函数here。

我所做的更改是drawTick功能，我添加了.call(wrap,30,label)

  svg.append("text")
    .attr("x", width / 2 + tubeWidth / 2 + 15)
    .attr("y", scale(t))
    .attr("dy", "0em")
    .text(label)
    .style("fill", labelColor)
    .style("stroke", "black")
    .style("font-size", "16px")
    .call(wrap,30,label)

查看我的jsfiddle here

Answer 2

SVG文本没有任何包装功能。您需要以编程方式执行此操作。

SVG文字环绕

2 个答案: