javascript - SVG Text Wrapping - Stack Overflow

admin管理员组

文章数量:1410674

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.

/

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

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/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

Share Improve this question Follow edited Jul 21, 2017 at 14:59 Corcorancr asked Jul 21, 2017 at 14:50 CorcorancrCorcorancr 111 gold badge11 silver badge22 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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 text doesn't have any wrapping functionality. You will need to do it programmatically.

本文标签： javascriptSVG Text WrappingStack Overflow