CODEWITHSUNDEEP
javascriptjquerycsssvg
Corcorancr
Corcorancr

Reputation: 1

SVG Text Wrapping

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

Upvotes: 0

Views: 13287

Answers (2)

Joshua Duxbury
Joshua Duxbury

Reputation: 5260

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

Upvotes: 2

Artsiom Miksiuk
Artsiom Miksiuk

Reputation: 4303

SVG text doesn't have any wrapping functionality. You will need to do it programmatically.

Upvotes: 0

Related Questions