Reputation: 105
I have multiple rect of different height and width, I need to show a text on the top left corner of the rect and no matter how much the width of the text is ,it should get adjusted in 50% of rect width.
Here is the code I have tried.
rectBbox = rectElem.getBBox();
textBbox = textElem.getBBox();
scale = rectBbox.width / textBbox.width;
X = parseFloat(rectBbox.x)
Y = parseFloat(rectBbox.y)
textElem.setAttribute("transform", "translate(" + X + "," + Y + ") scale(" + scale + ")");
my svg looks like
<svg>
<g id="maingroup">
<g id="firstchild">
<rect></rect>
<text></text>
</g>
<g id="nthchild">
<rect></rect>
<text></text>
</g>
<g>
</svg>
How can i scale it so that no matter what is the size of the rect or text is,text will get properly adjusted within 50% of rect's width
Upvotes: 0
Views: 1533
Reputation: 101918
In this example, we are positioning the <text>
elements at the default 0,0
. Then we calculate the difference between the top left of the rect and the top left of the text.
The scale part is similar: 0.5 * the ratio of the text width and the rect width.
function adjustText(boxElem)
{
var rectElem = boxElem.querySelector("rect");
var textElem = boxElem.querySelector("text");
var rectBbox = rectElem.getBBox();
var textBbox = textElem.getBBox();
var scale = 0.5 * rectBbox.width / textBbox.width;
var translateX = rectBbox.x - textBbox.x;
var translateY = rectBbox.y - textBbox.y;
textElem.setAttribute("transform", "translate(" + translateX + "," + translateY + ") scale(" + scale + ")");
}
adjustText(document.getElementById("firstchild"));
adjustText(document.getElementById("nthchild"));
<svg width="500" height="500">
<g id="maingroup">
<g id="firstchild">
<rect x="20" y="30" width="250" height="100" fill="lightgrey" stroke="black"/>
<text>Very Very Very Very Very Long Text</text>
</g>
<g id="nthchild">
<rect x="200" y="200" width="200" height="100" fill="lightgrey" stroke="black"/>
<text>Smaller Text</text>
</g>
</g>
</svg>
Upvotes: 3
Reputation: 33064
First I need to calculate the width of the text (txtlength
) and the width of the box (w
). I want to scale the text so I'm calculating the scale let thescale = w / (2*txtlength);
. // this will scale the text at 50% of the rect width. Next, using setAttributeNS I'm setting the value for the transform attribute. Please observe that the text has no x and no y attributes being centered around the origin of the SVG canvas.
let txtlength = txt.getComputedTextLength()
let w = theRect.getBBox().width;
let c = {x:50,y:25}// the center of the rect
let thescale = w / (2 * txtlength);// 50% of rect's width
//scale the text and translate in the center
txt.setAttributeNS(null, "transform", `scale(${thescale},${thescale}) translate(${c.x/thescale},${c.y/thescale})`)
svg{border:1px solid; width:120vh}
text{font-size:10;
dominant-baseline: middle;
text-anchor: middle}
<svg viewBox="0 0 100 50">
<rect id="theRect" x="10" y="10" width="80" height ="30" stroke="black" fill="none" />
<text id="txt" dominant-baseline="middle" text-anchor="middle">A very long text, sooo long </text>
</svg>
Upvotes: 1