SVG文字包装 [英] SVG Text Wrapping

问题描述

我一直在努力创建一个现金温度计，以显示每个月的进度.我在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);
}

解决方案

您需要将文本元素包装在tspan标记中.我在此处中已经存在的解决方案中使用了wrap函数. /p>

我对您的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

I have been working on creating a a cash thermometer that shows the progress for each month. I am having a problem with SVG text Wrapping and could use some help. The animation and everything else is set, I just cant get the text to wrap properly. Any help with this would be greatly appreciated. Below is the JS fiddle Link to my code. You'll notice that the text gets cut out and doesn't display properly.

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);
}

解决方案

You need to wrap the text elements in a tspan tag. I made use of the wrap function from a solution which already exists here.

The changes I made was to your drawTick function, I added .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)

Check out my jsfiddle here

这篇关于SVG文字包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！