Calculate SVG.Text Length before drawing

Asked May 05 '17 at 12:58

Active May 05 '17 at 12:58

Viewed 348 times

I'd like to calculate the length of a text with a specific font before drawing it. I found this stackoverflow answer and used it in my code. This could work nice but for this to work I need to draw the text before I draw the box that is supposed to contain the text as a label.

This is my test code which gets the length of the text and is supposed to use it for the box width:

// Draw Label first so we get the min width for the box
if (this.label) {
    var text = draw.plain(this.label)
    text.move(this.x + 5, this.y + 5);
    text.font(cfgText);
    var length = document.getElementsByTagName('text')[0].getComputedTextLength());
}

// Draw underlying box
var rect = draw.rect(this.width, this.height);
rect.move(this.x, this.y);
rect.fill(pink);
rect.mouseover(shift);

Is there a way to calculate the length of the text correctly? I'd like to stay in the SVG.js context if possible.

I think this problem would be solved by either calculating the text length beforehand or drawing the text first, getting its length and then pulling it back into the foreground.

Any ideas?

edited May 23 '17 at 12:34

Community

asked May 05 '17 at 12:58

FabianTe

1

http://stackoverflow.com/questions/15500894/background-color-of-text-in-svg/31013492#31013492 – Robert Longson May 05 '17 at 13:12
Haven't thought about just using a text with a backgound color. This might work, but I am curious if I will be able to add a "padding" and other styling to the "fake box". – FabianTe May 05 '17 at 13:14
make the filter area bigger to add padding. – Robert Longson May 05 '17 at 13:15
That did the trick for me! Thank you – FabianTe May 08 '17 at 11:29

Calculate SVG.Text Length before drawing

0 Answers0