SVG文字环绕

我一直致力于创建一个显示每月进度的现金温度计。 我遇到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函数。

我做的更改是你的drawTick函数，我添加了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

Answer 2

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