javascript - SVG 文字环绕

Question

我一直致力于创建一个现金温度计，显示每个月的进度。我在使用 SVG 文本环绕时遇到问题，需要一些帮助。动画和其他一切都已设置，我只是无法让文本正确换行。对此的任何帮助将不胜感激。下面是我的代码的 JS fiddle 链接。您会注意到文本被 chop 并且无法正确显示。

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