SVG 文本换行答案

【问题标题】：SVG Text WrappingSVG 文本换行
【发布时间】：2017-12-27 16:23:30
【问题描述】：

我一直在制作一个现金温度计，可以显示每个月的进度。我在使用 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);
}

【问题讨论】：

标签： javascript jquery css svg

【解决方案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

【讨论】：

能否请您重新发布您发送的链接。发布的是我的原始代码，没有更改。非常感谢您的帮助

【解决方案2】：

SVG 文本没有任何换行功能。您需要以编程方式进行。

【讨论】：