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 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
Post a Comment