How to position a text element to a specific position and resizable in SVG?

I am creating a rect element based on input values from textbox(getting Height,Width,X and Y from textbox).

When rect is created and appended in parent g element. I am creating a text element showing the newly created rect number.I positioned this text to top left corner of rect.

This is my piece of code(not entire only relevant to question).It is called on onclick event of button.

  //Creating <rect> 

   Rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

   Rect.setAttributeNS(null, "id", "rectId");

   Rect.setAttributeNS(null, "x", x);   //getting x from textbox

   Rect.setAttributeNS(null, "width", width);   //getting width from 

    textbox

   Rect.setAttributeNS(null, "y", y);   //getting y from textbox

   Rect.setAttributeNS(null, "height", height);  //getting height from 

   textbox

   Rect.setAttributeNS(null, "fill", "none");

   grp.appendChild(Rect);





   //Creating <text> for Rect Num

   RectNo = document.createElementNS('http://www.w3.org/2000/svg', 'text');

   RectNo.setAttributeNS(null, "id", "textNo");

   numTxt = document.createTextNode("RectNum_"+(any number));

   RectNo.appendChild(numTxt);

   grp.appendChild(RectNo);



   scale = (width - (width-13)) / width; //(width of rect)

   posX = x+1;  //(x of rect)

   posY = y+3;  //(y of rect)



   RectNo.setAttribute("transform", "translate(" + posX + "," + posY + ") 

   scale(" + scale + ")");

Created rect can be of any size,so for scaling the text element, I tried above code of transform. But somehow it is not working.What I need is that no matter how big or small the rect size is, the RectNo text should appear in the top left-corner of rect and should get adjusted(resize height and width) according to the rect size.

asked Jan 2 at 14:47

Shahid

318

add a comment |

I am creating a rect element based on input values from textbox(getting Height,Width,X and Y from textbox).

When rect is created and appended in parent g element. I am creating a text element showing the newly created rect number.I positioned this text to top left corner of rect.

This is my piece of code(not entire only relevant to question).It is called on onclick event of button.

  //Creating <rect> 

   Rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

   Rect.setAttributeNS(null, "id", "rectId");

   Rect.setAttributeNS(null, "x", x);   //getting x from textbox

   Rect.setAttributeNS(null, "width", width);   //getting width from 

    textbox

   Rect.setAttributeNS(null, "y", y);   //getting y from textbox

   Rect.setAttributeNS(null, "height", height);  //getting height from 

   textbox

   Rect.setAttributeNS(null, "fill", "none");

   grp.appendChild(Rect);





   //Creating <text> for Rect Num

   RectNo = document.createElementNS('http://www.w3.org/2000/svg', 'text');

   RectNo.setAttributeNS(null, "id", "textNo");

   numTxt = document.createTextNode("RectNum_"+(any number));

   RectNo.appendChild(numTxt);

   grp.appendChild(RectNo);



   scale = (width - (width-13)) / width; //(width of rect)

   posX = x+1;  //(x of rect)

   posY = y+3;  //(y of rect)



   RectNo.setAttribute("transform", "translate(" + posX + "," + posY + ") 

   scale(" + scale + ")");

asked Jan 2 at 14:47

Shahid

318

add a comment |

I am creating a rect element based on input values from textbox(getting Height,Width,X and Y from textbox).

When rect is created and appended in parent g element. I am creating a text element showing the newly created rect number.I positioned this text to top left corner of rect.

This is my piece of code(not entire only relevant to question).It is called on onclick event of button.

  //Creating <rect> 

   Rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

   Rect.setAttributeNS(null, "id", "rectId");

   Rect.setAttributeNS(null, "x", x);   //getting x from textbox

   Rect.setAttributeNS(null, "width", width);   //getting width from 

    textbox

   Rect.setAttributeNS(null, "y", y);   //getting y from textbox

   Rect.setAttributeNS(null, "height", height);  //getting height from 

   textbox

   Rect.setAttributeNS(null, "fill", "none");

   grp.appendChild(Rect);





   //Creating <text> for Rect Num

   RectNo = document.createElementNS('http://www.w3.org/2000/svg', 'text');

   RectNo.setAttributeNS(null, "id", "textNo");

   numTxt = document.createTextNode("RectNum_"+(any number));

   RectNo.appendChild(numTxt);

   grp.appendChild(RectNo);



   scale = (width - (width-13)) / width; //(width of rect)

   posX = x+1;  //(x of rect)

   posY = y+3;  //(y of rect)



   RectNo.setAttribute("transform", "translate(" + posX + "," + posY + ") 

   scale(" + scale + ")");

asked Jan 2 at 14:47

Shahid

318

I am creating a rect element based on input values from textbox(getting Height,Width,X and Y from textbox).

When rect is created and appended in parent g element. I am creating a text element showing the newly created rect number.I positioned this text to top left corner of rect.

This is my piece of code(not entire only relevant to question).It is called on onclick event of button.

  //Creating <rect> 

   Rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

   Rect.setAttributeNS(null, "id", "rectId");

   Rect.setAttributeNS(null, "x", x);   //getting x from textbox

   Rect.setAttributeNS(null, "width", width);   //getting width from 

    textbox

   Rect.setAttributeNS(null, "y", y);   //getting y from textbox

   Rect.setAttributeNS(null, "height", height);  //getting height from 

   textbox

   Rect.setAttributeNS(null, "fill", "none");

   grp.appendChild(Rect);





   //Creating <text> for Rect Num

   RectNo = document.createElementNS('http://www.w3.org/2000/svg', 'text');

   RectNo.setAttributeNS(null, "id", "textNo");

   numTxt = document.createTextNode("RectNum_"+(any number));

   RectNo.appendChild(numTxt);

   grp.appendChild(RectNo);



   scale = (width - (width-13)) / width; //(width of rect)

   posX = x+1;  //(x of rect)

   posY = y+3;  //(y of rect)



   RectNo.setAttribute("transform", "translate(" + posX + "," + posY + ") 

   scale(" + scale + ")");

javascript jquery svg svg-edit

asked Jan 2 at 14:47

Shahid

318

asked Jan 2 at 14:47

Shahid

318

asked Jan 2 at 14:47

Shahid

318

asked Jan 2 at 14:47

Shahid

318

asked Jan 2 at 14:47

Shahid

318

add a comment |

1 Answer
1

active

oldest

votes

First I get the width of the text:let txtW = RectNo.getComputedTextLength();

Next I'm calculating the scale: scale = (width-13) / txtW;

I gather that you need a 13 units gap at the end of the text.

Also in the CSS I'm using text{dominant-baseline:hanging}, otherwise you'll get the text half outside the rect. I hope it helps.

let x=10,y=10,width=100,height=50,any_number = 3;



//Creating <rect> 

   Rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

   Rect.setAttributeNS(null, "id", "rectId");

   Rect.setAttributeNS(null, "x", x);   //getting x from textbox

   Rect.setAttributeNS(null, "width", width);   //getting width from textbox

   Rect.setAttributeNS(null, "y", y);   //getting y from textbox

   Rect.setAttributeNS(null, "height", height);  //getting height from textbox

   Rect.setAttributeNS(null, "fill", "#d9d9d9");

   grp.appendChild(Rect);





   //Creating <text> for Rect Num

   RectNo = document.createElementNS('http://www.w3.org/2000/svg', 'text');

   RectNo.setAttributeNS(null, "id", "textNo");

   numTxt = document.createTextNode("RectNum_"+ (Math.random()*100));

   RectNo.appendChild(numTxt);

   

   grp.appendChild(RectNo);



   let txtW = RectNo.getComputedTextLength();



   scale = (width-13) / txtW; 

   posX = x+1;  //(x of rect)

   posY = y+3;  //(y of rect)



   RectNo.setAttribute("transform", "translate(" + posX + "," + posY + ")"+"scale(" + scale + ")");

svg{border:1px solid}

text{dominant-baseline:hanging}

<svg viewBox="0 0 200 100">

  <g id="grp"></g>

</svg>

answered Jan 2 at 15:19

enxaneta

9,0902519

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54008358%2fhow-to-position-a-text-element-to-a-specific-position-and-resizable-in-svg%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

First I get the width of the text:let txtW = RectNo.getComputedTextLength();

Next I'm calculating the scale: scale = (width-13) / txtW;

I gather that you need a 13 units gap at the end of the text.

Also in the CSS I'm using text{dominant-baseline:hanging}, otherwise you'll get the text half outside the rect. I hope it helps.

let x=10,y=10,width=100,height=50,any_number = 3;



//Creating <rect> 

   Rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

   Rect.setAttributeNS(null, "id", "rectId");

   Rect.setAttributeNS(null, "x", x);   //getting x from textbox

   Rect.setAttributeNS(null, "width", width);   //getting width from textbox

   Rect.setAttributeNS(null, "y", y);   //getting y from textbox

   Rect.setAttributeNS(null, "height", height);  //getting height from textbox

   Rect.setAttributeNS(null, "fill", "#d9d9d9");

   grp.appendChild(Rect);





   //Creating <text> for Rect Num

   RectNo = document.createElementNS('http://www.w3.org/2000/svg', 'text');

   RectNo.setAttributeNS(null, "id", "textNo");

   numTxt = document.createTextNode("RectNum_"+ (Math.random()*100));

   RectNo.appendChild(numTxt);

   

   grp.appendChild(RectNo);



   let txtW = RectNo.getComputedTextLength();



   scale = (width-13) / txtW; 

   posX = x+1;  //(x of rect)

   posY = y+3;  //(y of rect)



   RectNo.setAttribute("transform", "translate(" + posX + "," + posY + ")"+"scale(" + scale + ")");

svg{border:1px solid}

text{dominant-baseline:hanging}

<svg viewBox="0 0 200 100">

  <g id="grp"></g>

</svg>

answered Jan 2 at 15:19

enxaneta

9,0902519

add a comment |

First I get the width of the text:let txtW = RectNo.getComputedTextLength();

Next I'm calculating the scale: scale = (width-13) / txtW;

I gather that you need a 13 units gap at the end of the text.

Also in the CSS I'm using text{dominant-baseline:hanging}, otherwise you'll get the text half outside the rect. I hope it helps.

let x=10,y=10,width=100,height=50,any_number = 3;



//Creating <rect> 

   Rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

   Rect.setAttributeNS(null, "id", "rectId");

   Rect.setAttributeNS(null, "x", x);   //getting x from textbox

   Rect.setAttributeNS(null, "width", width);   //getting width from textbox

   Rect.setAttributeNS(null, "y", y);   //getting y from textbox

   Rect.setAttributeNS(null, "height", height);  //getting height from textbox

   Rect.setAttributeNS(null, "fill", "#d9d9d9");

   grp.appendChild(Rect);





   //Creating <text> for Rect Num

   RectNo = document.createElementNS('http://www.w3.org/2000/svg', 'text');

   RectNo.setAttributeNS(null, "id", "textNo");

   numTxt = document.createTextNode("RectNum_"+ (Math.random()*100));

   RectNo.appendChild(numTxt);

   

   grp.appendChild(RectNo);



   let txtW = RectNo.getComputedTextLength();



   scale = (width-13) / txtW; 

   posX = x+1;  //(x of rect)

   posY = y+3;  //(y of rect)



   RectNo.setAttribute("transform", "translate(" + posX + "," + posY + ")"+"scale(" + scale + ")");

svg{border:1px solid}

text{dominant-baseline:hanging}

<svg viewBox="0 0 200 100">

  <g id="grp"></g>

</svg>

answered Jan 2 at 15:19

enxaneta

9,0902519

add a comment |

First I get the width of the text:let txtW = RectNo.getComputedTextLength();

Next I'm calculating the scale: scale = (width-13) / txtW;

I gather that you need a 13 units gap at the end of the text.

Also in the CSS I'm using text{dominant-baseline:hanging}, otherwise you'll get the text half outside the rect. I hope it helps.

let x=10,y=10,width=100,height=50,any_number = 3;



//Creating <rect> 

   Rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

   Rect.setAttributeNS(null, "id", "rectId");

   Rect.setAttributeNS(null, "x", x);   //getting x from textbox

   Rect.setAttributeNS(null, "width", width);   //getting width from textbox

   Rect.setAttributeNS(null, "y", y);   //getting y from textbox

   Rect.setAttributeNS(null, "height", height);  //getting height from textbox

   Rect.setAttributeNS(null, "fill", "#d9d9d9");

   grp.appendChild(Rect);





   //Creating <text> for Rect Num

   RectNo = document.createElementNS('http://www.w3.org/2000/svg', 'text');

   RectNo.setAttributeNS(null, "id", "textNo");

   numTxt = document.createTextNode("RectNum_"+ (Math.random()*100));

   RectNo.appendChild(numTxt);

   

   grp.appendChild(RectNo);



   let txtW = RectNo.getComputedTextLength();



   scale = (width-13) / txtW; 

   posX = x+1;  //(x of rect)

   posY = y+3;  //(y of rect)



   RectNo.setAttribute("transform", "translate(" + posX + "," + posY + ")"+"scale(" + scale + ")");

svg{border:1px solid}

text{dominant-baseline:hanging}

<svg viewBox="0 0 200 100">

  <g id="grp"></g>

</svg>

answered Jan 2 at 15:19

enxaneta

9,0902519

First I get the width of the text:let txtW = RectNo.getComputedTextLength();

Next I'm calculating the scale: scale = (width-13) / txtW;

I gather that you need a 13 units gap at the end of the text.

Also in the CSS I'm using text{dominant-baseline:hanging}, otherwise you'll get the text half outside the rect. I hope it helps.

let x=10,y=10,width=100,height=50,any_number = 3;



//Creating <rect> 

   Rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

   Rect.setAttributeNS(null, "id", "rectId");

   Rect.setAttributeNS(null, "x", x);   //getting x from textbox

   Rect.setAttributeNS(null, "width", width);   //getting width from textbox

   Rect.setAttributeNS(null, "y", y);   //getting y from textbox

   Rect.setAttributeNS(null, "height", height);  //getting height from textbox

   Rect.setAttributeNS(null, "fill", "#d9d9d9");

   grp.appendChild(Rect);





   //Creating <text> for Rect Num

   RectNo = document.createElementNS('http://www.w3.org/2000/svg', 'text');

   RectNo.setAttributeNS(null, "id", "textNo");

   numTxt = document.createTextNode("RectNum_"+ (Math.random()*100));

   RectNo.appendChild(numTxt);

   

   grp.appendChild(RectNo);



   let txtW = RectNo.getComputedTextLength();



   scale = (width-13) / txtW; 

   posX = x+1;  //(x of rect)

   posY = y+3;  //(y of rect)



   RectNo.setAttribute("transform", "translate(" + posX + "," + posY + ")"+"scale(" + scale + ")");

svg{border:1px solid}

text{dominant-baseline:hanging}

<svg viewBox="0 0 200 100">

  <g id="grp"></g>

</svg>

let x=10,y=10,width=100,height=50,any_number = 3;



//Creating <rect> 

   Rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

   Rect.setAttributeNS(null, "id", "rectId");

   Rect.setAttributeNS(null, "x", x);   //getting x from textbox

   Rect.setAttributeNS(null, "width", width);   //getting width from textbox

   Rect.setAttributeNS(null, "y", y);   //getting y from textbox

   Rect.setAttributeNS(null, "height", height);  //getting height from textbox

   Rect.setAttributeNS(null, "fill", "#d9d9d9");

   grp.appendChild(Rect);





   //Creating <text> for Rect Num

   RectNo = document.createElementNS('http://www.w3.org/2000/svg', 'text');

   RectNo.setAttributeNS(null, "id", "textNo");

   numTxt = document.createTextNode("RectNum_"+ (Math.random()*100));

   RectNo.appendChild(numTxt);

   

   grp.appendChild(RectNo);



   let txtW = RectNo.getComputedTextLength();



   scale = (width-13) / txtW; 

   posX = x+1;  //(x of rect)

   posY = y+3;  //(y of rect)



   RectNo.setAttribute("transform", "translate(" + posX + "," + posY + ")"+"scale(" + scale + ")");

svg{border:1px solid}

text{dominant-baseline:hanging}

<svg viewBox="0 0 200 100">

  <g id="grp"></g>

</svg>

let x=10,y=10,width=100,height=50,any_number = 3;



//Creating <rect> 

   Rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

   Rect.setAttributeNS(null, "id", "rectId");

   Rect.setAttributeNS(null, "x", x);   //getting x from textbox

   Rect.setAttributeNS(null, "width", width);   //getting width from textbox

   Rect.setAttributeNS(null, "y", y);   //getting y from textbox

   Rect.setAttributeNS(null, "height", height);  //getting height from textbox

   Rect.setAttributeNS(null, "fill", "#d9d9d9");

   grp.appendChild(Rect);





   //Creating <text> for Rect Num

   RectNo = document.createElementNS('http://www.w3.org/2000/svg', 'text');

   RectNo.setAttributeNS(null, "id", "textNo");

   numTxt = document.createTextNode("RectNum_"+ (Math.random()*100));

   RectNo.appendChild(numTxt);

   

   grp.appendChild(RectNo);



   let txtW = RectNo.getComputedTextLength();



   scale = (width-13) / txtW; 

   posX = x+1;  //(x of rect)

   posY = y+3;  //(y of rect)



   RectNo.setAttribute("transform", "translate(" + posX + "," + posY + ")"+"scale(" + scale + ")");

svg{border:1px solid}

text{dominant-baseline:hanging}

<svg viewBox="0 0 200 100">

  <g id="grp"></g>

</svg>

answered Jan 2 at 15:19

enxaneta

9,0902519

answered Jan 2 at 15:19

enxaneta

9,0902519

answered Jan 2 at 15:19

enxaneta

9,0902519

answered Jan 2 at 15:19

enxaneta

9,0902519

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk