javascript - Snap.svg and dynamic text -


i'm trying place text dynamically svg created snap, tried:

this.setcontent(   `<svg id="${this.svgid}"></svg>` );  var snap = snap($(`#${this.svgid}`)[0]); text = "asdfsdfsdsfd";  var rect = snap.paper.rect(0, 0, 50, text.length*3 + 4, 10); snap.text(1.5,10, text);  console.log("rect", rect); console.log("snap", snap);  rect.attr({   fill: "#ffffff",   fillopacity: 0.6, }); 

i this: enter image description here

i want rectangle little bigger text, there must better way calculate length , height of text, , that's assuming font size won't change.

this result found regarding text in snap docs: http://snapsvg.io/docs/#paper.text

you try using getbbox() on text element, , use figure size of rect. getbbox() wll give x,y,width,height,x2,y2 figures help.

vat text = s.text(0,0,'blah blah') var bb = text.getbbox(); var rect = s.rect(bb.x, bb.y, bb.width, bb.height ) 

adjusting offsets whatever padding etc want. may need allow stroke widths, don't think that's included.


Comments

Popular posts from this blog

javascript - Clear button on addentry page doesn't work -

c# - Selenium Authentication Popup preventing driver close or quit -

tensorflow when input_data MNIST_data , zlib.error: Error -3 while decompressing: invalid block type -