SVG Element Overlapping Even with Correct x and y The Ask Question Wizard is Live! Data science time! April 2019 and salary with experienceRetrieve the position (X,Y) of an HTML elementCreating a div element in jQueryHow to move an element into another element?Click through div to underlying elementsRemove inline CSS and classes from text with PHPHow do i control the font weight in CSSComputed CSS font family defies meValidation Error: Value Error : font-family 'Neue' is not a font-family value : Helvetica 'Neue',Helvetica,Arial,sans-serifHow to parse the data which contains Html tags like style, color,font family, fontsize and set in textview in androidHow do I fix “fallback” weight for different fonts?
Was there ever a LEGO store in Miami International Airport?
Does using the Inspiration rules for character defects encourage My Guy Syndrome?
When speaking, how do you change your mind mid-sentence?
What is the purpose of the side handle on a hand ("eggbeater") drill?
Arriving in Atlanta (after US Preclearance in Dublin). Will I go through TSA security in Atlanta to transfer to a connecting flight?
How long can a nation maintain a technological edge over the rest of the world?
Bright yellow or light yellow?
What to do with someone that cheated their way though university and a PhD program?
Coin Game with infinite paradox
Where to find documentation for `whois` command options?
Could a cockatrice have parasitic embryos?
Will I be more secure with my own router behind my ISP's router?
My admission is revoked after accepting the admission offer
Will temporary Dex penalties prevent you from getting the benefits of the "Two Weapon Fighting" feat if your Dex score falls below the prerequisite?
Co-worker works way more than he should
Preserving file and folder permissions with rsync
What's called a person who works as someone who puts products on shelves in stores?
Married in secret, can marital status in passport be changed at a later date?
/bin/ls sorts differently than just ls
Why did Europeans not widely domesticate foxes?
What *exactly* is electrical current, voltage, and resistance?
How was Lagrange appointed professor of mathematics so early?
Why would the Overseers waste their stock of slaves on the Game?
Is there a way to fake a method response using Mock or Stubs?
SVG Element Overlapping Even with Correct x and y
The Ask Question Wizard is Live!
Data science time! April 2019 and salary with experienceRetrieve the position (X,Y) of an HTML elementCreating a div element in jQueryHow to move an element into another element?Click through div to underlying elementsRemove inline CSS and classes from text with PHPHow do i control the font weight in CSSComputed CSS font family defies meValidation Error: Value Error : font-family 'Neue' is not a font-family value : Helvetica 'Neue',Helvetica,Arial,sans-serifHow to parse the data which contains Html tags like style, color,font family, fontsize and set in textview in androidHow do I fix “fallback” weight for different fonts?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
1
I am showing some textbox in svg one after other and they are positioned by their x and y attributes values. The code is given below.
<svg width="500" height="300" viewBox="-6 -6 512 312">
<g>
<path d="M15,0h470a15,15 0 0 1 15,15v270a15,15 0 0 1 -15,15h-470a15,15 0 0 1 -15,-15v-270a15,15 0 0 1 15,-15z" id="stroke-path" fill="none" stroke="#000000" stroke-width="12"></path>
</g>
<g>
<text alignment-baseline="middle" style="font-family: Arial; font-size: 36px; font-style: normal; font-weight: normal; fill: rgb(127, 49, 47);" text-anchor="start" x="60.4056510925293" y="128.50210571289062">1/1/2018 4:00:00 AM</text>
<title>1/1/2018 4:00:00 AM</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 16px; font-style: normal; font-weight: normal; fill: rgb(1, 138, 128);" text-anchor="start" x="10" y="162.99429321289062">Earliest Date Time End</text>
<title>Earliest Date Time End</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(253, 98, 94);" text-anchor="start" x="10" y="128.50210571289062">Hello</text>
<title>Hello</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(254, 150, 102);" text-anchor="start" x="381.7397880554199" y="128.50210571289062">dfsdf</text>
<title>dfsdf</title>
</g>
</svg>If you run above code snippet you will see that text dfsdf is overlapping on date.
The x value of text dfsdf is calculated as below.
x = 10(x of Hello) + 50.41(width of Hello) + 321.33(width of date) = 381.74
By above calculation it should not overlap with date. but still it is overlapping. How do I make sure that it does not overlap on date?
Please note that the width of this text elements are dynamic and I am getting this width by using getBoundingClientRect function in javascript.
html css svg
asked Mar 9 at 4:31
Bhavesh JadavBhavesh Jadav
347215
add a comment |
1
I am showing some textbox in svg one after other and they are positioned by their x and y attributes values. The code is given below.
<svg width="500" height="300" viewBox="-6 -6 512 312">
<g>
<path d="M15,0h470a15,15 0 0 1 15,15v270a15,15 0 0 1 -15,15h-470a15,15 0 0 1 -15,-15v-270a15,15 0 0 1 15,-15z" id="stroke-path" fill="none" stroke="#000000" stroke-width="12"></path>
</g>
<g>
<text alignment-baseline="middle" style="font-family: Arial; font-size: 36px; font-style: normal; font-weight: normal; fill: rgb(127, 49, 47);" text-anchor="start" x="60.4056510925293" y="128.50210571289062">1/1/2018 4:00:00 AM</text>
<title>1/1/2018 4:00:00 AM</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 16px; font-style: normal; font-weight: normal; fill: rgb(1, 138, 128);" text-anchor="start" x="10" y="162.99429321289062">Earliest Date Time End</text>
<title>Earliest Date Time End</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(253, 98, 94);" text-anchor="start" x="10" y="128.50210571289062">Hello</text>
<title>Hello</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(254, 150, 102);" text-anchor="start" x="381.7397880554199" y="128.50210571289062">dfsdf</text>
<title>dfsdf</title>
</g>
</svg>If you run above code snippet you will see that text dfsdf is overlapping on date.
The x value of text dfsdf is calculated as below.
x = 10(x of Hello) + 50.41(width of Hello) + 321.33(width of date) = 381.74
By above calculation it should not overlap with date. but still it is overlapping. How do I make sure that it does not overlap on date?
Please note that the width of this text elements are dynamic and I am getting this width by using getBoundingClientRect function in javascript.
html css svg
asked Mar 9 at 4:31
Bhavesh JadavBhavesh Jadav
347215
If you remove the white space gaps between the date string, the widths line up well and no overlapping occurs. I don't understand what's really going on, though! So frustrating.
– Andy Hoffman
Mar 9 at 5:05
I think the calculated width of date is including whitespace inisde date because when I remove the space, it also reduces width to 302
– Bhavesh Jadav
Mar 9 at 5:20
Your viewBox units are no longer pixels, so a measurement using ClientRect (which return pixel values) won't match the SVG unit system anymore. This could be at least part of it.
– Michael Mullany
Mar 9 at 23:34
@MichaelMullany So what will be the correct approach here? Is there a method to calculate it properly?
– Bhavesh Jadav
Mar 10 at 3:20
add a comment |
1
1
1
I am showing some textbox in svg one after other and they are positioned by their x and y attributes values. The code is given below.
<svg width="500" height="300" viewBox="-6 -6 512 312">
<g>
<path d="M15,0h470a15,15 0 0 1 15,15v270a15,15 0 0 1 -15,15h-470a15,15 0 0 1 -15,-15v-270a15,15 0 0 1 15,-15z" id="stroke-path" fill="none" stroke="#000000" stroke-width="12"></path>
</g>
<g>
<text alignment-baseline="middle" style="font-family: Arial; font-size: 36px; font-style: normal; font-weight: normal; fill: rgb(127, 49, 47);" text-anchor="start" x="60.4056510925293" y="128.50210571289062">1/1/2018 4:00:00 AM</text>
<title>1/1/2018 4:00:00 AM</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 16px; font-style: normal; font-weight: normal; fill: rgb(1, 138, 128);" text-anchor="start" x="10" y="162.99429321289062">Earliest Date Time End</text>
<title>Earliest Date Time End</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(253, 98, 94);" text-anchor="start" x="10" y="128.50210571289062">Hello</text>
<title>Hello</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(254, 150, 102);" text-anchor="start" x="381.7397880554199" y="128.50210571289062">dfsdf</text>
<title>dfsdf</title>
</g>
</svg>If you run above code snippet you will see that text dfsdf is overlapping on date.
The x value of text dfsdf is calculated as below.
x = 10(x of Hello) + 50.41(width of Hello) + 321.33(width of date) = 381.74
By above calculation it should not overlap with date. but still it is overlapping. How do I make sure that it does not overlap on date?
Please note that the width of this text elements are dynamic and I am getting this width by using getBoundingClientRect function in javascript.
html css svg
asked Mar 9 at 4:31
Bhavesh JadavBhavesh Jadav
347215
I am showing some textbox in svg one after other and they are positioned by their x and y attributes values. The code is given below.
<svg width="500" height="300" viewBox="-6 -6 512 312">
<g>
<path d="M15,0h470a15,15 0 0 1 15,15v270a15,15 0 0 1 -15,15h-470a15,15 0 0 1 -15,-15v-270a15,15 0 0 1 15,-15z" id="stroke-path" fill="none" stroke="#000000" stroke-width="12"></path>
</g>
<g>
<text alignment-baseline="middle" style="font-family: Arial; font-size: 36px; font-style: normal; font-weight: normal; fill: rgb(127, 49, 47);" text-anchor="start" x="60.4056510925293" y="128.50210571289062">1/1/2018 4:00:00 AM</text>
<title>1/1/2018 4:00:00 AM</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 16px; font-style: normal; font-weight: normal; fill: rgb(1, 138, 128);" text-anchor="start" x="10" y="162.99429321289062">Earliest Date Time End</text>
<title>Earliest Date Time End</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(253, 98, 94);" text-anchor="start" x="10" y="128.50210571289062">Hello</text>
<title>Hello</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(254, 150, 102);" text-anchor="start" x="381.7397880554199" y="128.50210571289062">dfsdf</text>
<title>dfsdf</title>
</g>
</svg>If you run above code snippet you will see that text dfsdf is overlapping on date.
The x value of text dfsdf is calculated as below.
x = 10(x of Hello) + 50.41(width of Hello) + 321.33(width of date) = 381.74
By above calculation it should not overlap with date. but still it is overlapping. How do I make sure that it does not overlap on date?
Please note that the width of this text elements are dynamic and I am getting this width by using getBoundingClientRect function in javascript.
<svg width="500" height="300" viewBox="-6 -6 512 312">
<g>
<path d="M15,0h470a15,15 0 0 1 15,15v270a15,15 0 0 1 -15,15h-470a15,15 0 0 1 -15,-15v-270a15,15 0 0 1 15,-15z" id="stroke-path" fill="none" stroke="#000000" stroke-width="12"></path>
</g>
<g>
<text alignment-baseline="middle" style="font-family: Arial; font-size: 36px; font-style: normal; font-weight: normal; fill: rgb(127, 49, 47);" text-anchor="start" x="60.4056510925293" y="128.50210571289062">1/1/2018 4:00:00 AM</text>
<title>1/1/2018 4:00:00 AM</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 16px; font-style: normal; font-weight: normal; fill: rgb(1, 138, 128);" text-anchor="start" x="10" y="162.99429321289062">Earliest Date Time End</text>
<title>Earliest Date Time End</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(253, 98, 94);" text-anchor="start" x="10" y="128.50210571289062">Hello</text>
<title>Hello</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(254, 150, 102);" text-anchor="start" x="381.7397880554199" y="128.50210571289062">dfsdf</text>
<title>dfsdf</title>
</g>
</svg><svg width="500" height="300" viewBox="-6 -6 512 312">
<g>
<path d="M15,0h470a15,15 0 0 1 15,15v270a15,15 0 0 1 -15,15h-470a15,15 0 0 1 -15,-15v-270a15,15 0 0 1 15,-15z" id="stroke-path" fill="none" stroke="#000000" stroke-width="12"></path>
</g>
<g>
<text alignment-baseline="middle" style="font-family: Arial; font-size: 36px; font-style: normal; font-weight: normal; fill: rgb(127, 49, 47);" text-anchor="start" x="60.4056510925293" y="128.50210571289062">1/1/2018 4:00:00 AM</text>
<title>1/1/2018 4:00:00 AM</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 16px; font-style: normal; font-weight: normal; fill: rgb(1, 138, 128);" text-anchor="start" x="10" y="162.99429321289062">Earliest Date Time End</text>
<title>Earliest Date Time End</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(253, 98, 94);" text-anchor="start" x="10" y="128.50210571289062">Hello</text>
<title>Hello</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(254, 150, 102);" text-anchor="start" x="381.7397880554199" y="128.50210571289062">dfsdf</text>
<title>dfsdf</title>
</g>
</svg>html css svg
html css svg
asked Mar 9 at 4:31
Bhavesh JadavBhavesh Jadav
347215
asked Mar 9 at 4:31
Bhavesh JadavBhavesh Jadav
347215
edited Mar 9 at 10:34
Bhavesh Jadav
asked Mar 9 at 4:31
Bhavesh JadavBhavesh Jadav
347215
asked Mar 9 at 4:31
Bhavesh JadavBhavesh Jadav
347215
asked Mar 9 at 4:31
Bhavesh JadavBhavesh Jadav
347215
347215
If you remove the white space gaps between the date string, the widths line up well and no overlapping occurs. I don't understand what's really going on, though! So frustrating.
– Andy Hoffman
Mar 9 at 5:05
I think the calculated width of date is including whitespace inisde date because when I remove the space, it also reduces width to 302
– Bhavesh Jadav
Mar 9 at 5:20
Your viewBox units are no longer pixels, so a measurement using ClientRect (which return pixel values) won't match the SVG unit system anymore. This could be at least part of it.
– Michael Mullany
Mar 9 at 23:34
@MichaelMullany So what will be the correct approach here? Is there a method to calculate it properly?
– Bhavesh Jadav
Mar 10 at 3:20
add a comment |
If you remove the white space gaps between the date string, the widths line up well and no overlapping occurs. I don't understand what's really going on, though! So frustrating.
– Andy Hoffman
Mar 9 at 5:05
I think the calculated width of date is including whitespace inisde date because when I remove the space, it also reduces width to 302
– Bhavesh Jadav
Mar 9 at 5:20
Your viewBox units are no longer pixels, so a measurement using ClientRect (which return pixel values) won't match the SVG unit system anymore. This could be at least part of it.
– Michael Mullany
Mar 9 at 23:34
@MichaelMullany So what will be the correct approach here? Is there a method to calculate it properly?
– Bhavesh Jadav
Mar 10 at 3:20
If you remove the white space gaps between the date string, the widths line up well and no overlapping occurs. I don't understand what's really going on, though! So frustrating.
– Andy Hoffman
Mar 9 at 5:05
If you remove the white space gaps between the date string, the widths line up well and no overlapping occurs. I don't understand what's really going on, though! So frustrating.
– Andy Hoffman
Mar 9 at 5:05
I think the calculated width of date is including whitespace inisde date because when I remove the space, it also reduces width to 302
– Bhavesh Jadav
Mar 9 at 5:20
I think the calculated width of date is including whitespace inisde date because when I remove the space, it also reduces width to 302
– Bhavesh Jadav
Mar 9 at 5:20
Your viewBox units are no longer pixels, so a measurement using ClientRect (which return pixel values) won't match the SVG unit system anymore. This could be at least part of it.
– Michael Mullany
Mar 9 at 23:34
Your viewBox units are no longer pixels, so a measurement using ClientRect (which return pixel values) won't match the SVG unit system anymore. This could be at least part of it.
– Michael Mullany
Mar 9 at 23:34
@MichaelMullany So what will be the correct approach here? Is there a method to calculate it properly?
– Bhavesh Jadav
Mar 10 at 3:20
@MichaelMullany So what will be the correct approach here? Is there a method to calculate it properly?
– Bhavesh Jadav
Mar 10 at 3:20
add a comment |
1 Answer
1
active
oldest
votes
2
You can use a little bit of javascript to calculate the position of every text using the getComputedTextLength() method.
let h = hello.getComputedTextLength();
time.setAttributeNS(null,"x", 10 + h + 20 )
let t = time.getComputedTextLength();
dfsdf.setAttributeNS(null,"x", 10 + h + 20 + t + 20 )<svg width="500" height="300" viewBox="-6 -6 512 312">
<g>
<path d="M15,0h470a15,15 0 0 1 15,15v270a15,15 0 0 1 -15,15h-470a15,15 0 0 1 -15,-15v-270a15,15 0 0 1 15,-15z" id="stroke-path" fill="none" stroke="#000000" stroke-width="12"></path>
</g>
<g>
<text id="hello" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(253, 98, 94);" text-anchor="start" x="10" y="128.50210571289062">Hello</text>
<title>Hello</title>
</g>
<g>
<text id="dfsdf" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(254, 150, 102);" text-anchor="start" x="381.7397880554199" y="128.50210571289062">dfsdf</text>
<title>dfsdf</title>
</g>
<g>
<text id="time" alignment-baseline="middle" style="font-family: Arial; font-size: 36px; font-style: normal; font-weight: normal; fill: rgb(127, 49, 47);" text-anchor="start" x="60.4056510925293" y="128.50210571289062">1/1/2018 4:00:00 AM</text>
<title>1/1/2018 4:00:00 AM</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 16px; font-style: normal; font-weight: normal; fill: rgb(1, 138, 128);" text-anchor="start" x="10" y="162.99429321289062">Earliest Date Time End</text>
<title>Earliest Date Time End</title>
</g>
</svg>An alternative solution would be positioning the text like this:
Hello: text-anchor="start" x="10"
dfsdf: text-anchor="end" x="490"
time: text-anchor="middle" x="250"
<svg width="500" height="300" viewBox="-6 -6 512 312">
<g>
<path d="M15,0h470a15,15 0 0 1 15,15v270a15,15 0 0 1 -15,15h-470a15,15 0 0 1 -15,-15v-270a15,15 0 0 1 15,-15z" id="stroke-path" fill="none" stroke="#000000" stroke-width="12"></path>
</g>
<g>
<text id="hello" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(253, 98, 94);" text-anchor="start" x="10" y="128.50210571289062">Hello</text>
<title>Hello</title>
</g>
<g>
<text id="dfsdf" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(254, 150, 102);" text-anchor="end" x="490" y="128.50210571289062">dfsdf</text>
<title>dfsdf</title>
</g>
<g>
<text id="time" alignment-baseline="middle" style="font-family: Arial; font-size: 36px; font-style: normal; font-weight: normal; fill: rgb(127, 49, 47);" text-anchor="middle" x="250" y="128.50210571289062">1/1/2018 4:00:00 AM</text>
<title>1/1/2018 4:00:00 AM</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 16px; font-style: normal; font-weight: normal; fill: rgb(1, 138, 128);" text-anchor="start" x="10" y="162.99429321289062">Earliest Date Time End</text>
<title>Earliest Date Time End</title>
</g>
</svg>answered Mar 9 at 7:35
enxanetaenxaneta
10.5k2821
In your first example you are adding 20px constant spacing between them. But what I am trying to do is just based on dynamic width of this text elements. I am usinggetBoundingClientRectfunction in javascript to get width of group elements.
– Bhavesh Jadav
Mar 9 at 10:36
I'm not very sure I understand your comment. You can easily remove the 20units or change it to a different value. I'm usinggetComputedTextLength()to get the length of text and the result is the same as the one I would get withgetBBox(). Do not usegetBoundingClientRect
– enxaneta
Mar 9 at 11:54
I have usegetBoundingClientRectbecausegetBBoxis not supported in IE
– Bhavesh Jadav
Mar 10 at 3:18
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');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55074001%2fsvg-element-overlapping-even-with-correct-x-and-y%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
You can use a little bit of javascript to calculate the position of every text using the getComputedTextLength() method.
let h = hello.getComputedTextLength();
time.setAttributeNS(null,"x", 10 + h + 20 )
let t = time.getComputedTextLength();
dfsdf.setAttributeNS(null,"x", 10 + h + 20 + t + 20 )<svg width="500" height="300" viewBox="-6 -6 512 312">
<g>
<path d="M15,0h470a15,15 0 0 1 15,15v270a15,15 0 0 1 -15,15h-470a15,15 0 0 1 -15,-15v-270a15,15 0 0 1 15,-15z" id="stroke-path" fill="none" stroke="#000000" stroke-width="12"></path>
</g>
<g>
<text id="hello" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(253, 98, 94);" text-anchor="start" x="10" y="128.50210571289062">Hello</text>
<title>Hello</title>
</g>
<g>
<text id="dfsdf" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(254, 150, 102);" text-anchor="start" x="381.7397880554199" y="128.50210571289062">dfsdf</text>
<title>dfsdf</title>
</g>
<g>
<text id="time" alignment-baseline="middle" style="font-family: Arial; font-size: 36px; font-style: normal; font-weight: normal; fill: rgb(127, 49, 47);" text-anchor="start" x="60.4056510925293" y="128.50210571289062">1/1/2018 4:00:00 AM</text>
<title>1/1/2018 4:00:00 AM</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 16px; font-style: normal; font-weight: normal; fill: rgb(1, 138, 128);" text-anchor="start" x="10" y="162.99429321289062">Earliest Date Time End</text>
<title>Earliest Date Time End</title>
</g>
</svg>An alternative solution would be positioning the text like this:
Hello: text-anchor="start" x="10"
dfsdf: text-anchor="end" x="490"
time: text-anchor="middle" x="250"
<svg width="500" height="300" viewBox="-6 -6 512 312">
<g>
<path d="M15,0h470a15,15 0 0 1 15,15v270a15,15 0 0 1 -15,15h-470a15,15 0 0 1 -15,-15v-270a15,15 0 0 1 15,-15z" id="stroke-path" fill="none" stroke="#000000" stroke-width="12"></path>
</g>
<g>
<text id="hello" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(253, 98, 94);" text-anchor="start" x="10" y="128.50210571289062">Hello</text>
<title>Hello</title>
</g>
<g>
<text id="dfsdf" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(254, 150, 102);" text-anchor="end" x="490" y="128.50210571289062">dfsdf</text>
<title>dfsdf</title>
</g>
<g>
<text id="time" alignment-baseline="middle" style="font-family: Arial; font-size: 36px; font-style: normal; font-weight: normal; fill: rgb(127, 49, 47);" text-anchor="middle" x="250" y="128.50210571289062">1/1/2018 4:00:00 AM</text>
<title>1/1/2018 4:00:00 AM</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 16px; font-style: normal; font-weight: normal; fill: rgb(1, 138, 128);" text-anchor="start" x="10" y="162.99429321289062">Earliest Date Time End</text>
<title>Earliest Date Time End</title>
</g>
</svg>answered Mar 9 at 7:35
enxanetaenxaneta
10.5k2821
In your first example you are adding 20px constant spacing between them. But what I am trying to do is just based on dynamic width of this text elements. I am usinggetBoundingClientRectfunction in javascript to get width of group elements.
– Bhavesh Jadav
Mar 9 at 10:36
I'm not very sure I understand your comment. You can easily remove the 20units or change it to a different value. I'm usinggetComputedTextLength()to get the length of text and the result is the same as the one I would get withgetBBox(). Do not usegetBoundingClientRect
– enxaneta
Mar 9 at 11:54
I have usegetBoundingClientRectbecausegetBBoxis not supported in IE
– Bhavesh Jadav
Mar 10 at 3:18
add a comment |
2
You can use a little bit of javascript to calculate the position of every text using the getComputedTextLength() method.
let h = hello.getComputedTextLength();
time.setAttributeNS(null,"x", 10 + h + 20 )
let t = time.getComputedTextLength();
dfsdf.setAttributeNS(null,"x", 10 + h + 20 + t + 20 )<svg width="500" height="300" viewBox="-6 -6 512 312">
<g>
<path d="M15,0h470a15,15 0 0 1 15,15v270a15,15 0 0 1 -15,15h-470a15,15 0 0 1 -15,-15v-270a15,15 0 0 1 15,-15z" id="stroke-path" fill="none" stroke="#000000" stroke-width="12"></path>
</g>
<g>
<text id="hello" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(253, 98, 94);" text-anchor="start" x="10" y="128.50210571289062">Hello</text>
<title>Hello</title>
</g>
<g>
<text id="dfsdf" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(254, 150, 102);" text-anchor="start" x="381.7397880554199" y="128.50210571289062">dfsdf</text>
<title>dfsdf</title>
</g>
<g>
<text id="time" alignment-baseline="middle" style="font-family: Arial; font-size: 36px; font-style: normal; font-weight: normal; fill: rgb(127, 49, 47);" text-anchor="start" x="60.4056510925293" y="128.50210571289062">1/1/2018 4:00:00 AM</text>
<title>1/1/2018 4:00:00 AM</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 16px; font-style: normal; font-weight: normal; fill: rgb(1, 138, 128);" text-anchor="start" x="10" y="162.99429321289062">Earliest Date Time End</text>
<title>Earliest Date Time End</title>
</g>
</svg>An alternative solution would be positioning the text like this:
Hello: text-anchor="start" x="10"
dfsdf: text-anchor="end" x="490"
time: text-anchor="middle" x="250"
<svg width="500" height="300" viewBox="-6 -6 512 312">
<g>
<path d="M15,0h470a15,15 0 0 1 15,15v270a15,15 0 0 1 -15,15h-470a15,15 0 0 1 -15,-15v-270a15,15 0 0 1 15,-15z" id="stroke-path" fill="none" stroke="#000000" stroke-width="12"></path>
</g>
<g>
<text id="hello" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(253, 98, 94);" text-anchor="start" x="10" y="128.50210571289062">Hello</text>
<title>Hello</title>
</g>
<g>
<text id="dfsdf" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(254, 150, 102);" text-anchor="end" x="490" y="128.50210571289062">dfsdf</text>
<title>dfsdf</title>
</g>
<g>
<text id="time" alignment-baseline="middle" style="font-family: Arial; font-size: 36px; font-style: normal; font-weight: normal; fill: rgb(127, 49, 47);" text-anchor="middle" x="250" y="128.50210571289062">1/1/2018 4:00:00 AM</text>
<title>1/1/2018 4:00:00 AM</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 16px; font-style: normal; font-weight: normal; fill: rgb(1, 138, 128);" text-anchor="start" x="10" y="162.99429321289062">Earliest Date Time End</text>
<title>Earliest Date Time End</title>
</g>
</svg>answered Mar 9 at 7:35
enxanetaenxaneta
10.5k2821
In your first example you are adding 20px constant spacing between them. But what I am trying to do is just based on dynamic width of this text elements. I am usinggetBoundingClientRectfunction in javascript to get width of group elements.
– Bhavesh Jadav
Mar 9 at 10:36
I'm not very sure I understand your comment. You can easily remove the 20units or change it to a different value. I'm usinggetComputedTextLength()to get the length of text and the result is the same as the one I would get withgetBBox(). Do not usegetBoundingClientRect
– enxaneta
Mar 9 at 11:54
I have usegetBoundingClientRectbecausegetBBoxis not supported in IE
– Bhavesh Jadav
Mar 10 at 3:18
add a comment |
2
2
2
You can use a little bit of javascript to calculate the position of every text using the getComputedTextLength() method.
let h = hello.getComputedTextLength();
time.setAttributeNS(null,"x", 10 + h + 20 )
let t = time.getComputedTextLength();
dfsdf.setAttributeNS(null,"x", 10 + h + 20 + t + 20 )<svg width="500" height="300" viewBox="-6 -6 512 312">
<g>
<path d="M15,0h470a15,15 0 0 1 15,15v270a15,15 0 0 1 -15,15h-470a15,15 0 0 1 -15,-15v-270a15,15 0 0 1 15,-15z" id="stroke-path" fill="none" stroke="#000000" stroke-width="12"></path>
</g>
<g>
<text id="hello" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(253, 98, 94);" text-anchor="start" x="10" y="128.50210571289062">Hello</text>
<title>Hello</title>
</g>
<g>
<text id="dfsdf" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(254, 150, 102);" text-anchor="start" x="381.7397880554199" y="128.50210571289062">dfsdf</text>
<title>dfsdf</title>
</g>
<g>
<text id="time" alignment-baseline="middle" style="font-family: Arial; font-size: 36px; font-style: normal; font-weight: normal; fill: rgb(127, 49, 47);" text-anchor="start" x="60.4056510925293" y="128.50210571289062">1/1/2018 4:00:00 AM</text>
<title>1/1/2018 4:00:00 AM</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 16px; font-style: normal; font-weight: normal; fill: rgb(1, 138, 128);" text-anchor="start" x="10" y="162.99429321289062">Earliest Date Time End</text>
<title>Earliest Date Time End</title>
</g>
</svg>An alternative solution would be positioning the text like this:
Hello: text-anchor="start" x="10"
dfsdf: text-anchor="end" x="490"
time: text-anchor="middle" x="250"
<svg width="500" height="300" viewBox="-6 -6 512 312">
<g>
<path d="M15,0h470a15,15 0 0 1 15,15v270a15,15 0 0 1 -15,15h-470a15,15 0 0 1 -15,-15v-270a15,15 0 0 1 15,-15z" id="stroke-path" fill="none" stroke="#000000" stroke-width="12"></path>
</g>
<g>
<text id="hello" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(253, 98, 94);" text-anchor="start" x="10" y="128.50210571289062">Hello</text>
<title>Hello</title>
</g>
<g>
<text id="dfsdf" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(254, 150, 102);" text-anchor="end" x="490" y="128.50210571289062">dfsdf</text>
<title>dfsdf</title>
</g>
<g>
<text id="time" alignment-baseline="middle" style="font-family: Arial; font-size: 36px; font-style: normal; font-weight: normal; fill: rgb(127, 49, 47);" text-anchor="middle" x="250" y="128.50210571289062">1/1/2018 4:00:00 AM</text>
<title>1/1/2018 4:00:00 AM</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 16px; font-style: normal; font-weight: normal; fill: rgb(1, 138, 128);" text-anchor="start" x="10" y="162.99429321289062">Earliest Date Time End</text>
<title>Earliest Date Time End</title>
</g>
</svg>answered Mar 9 at 7:35
enxanetaenxaneta
10.5k2821
You can use a little bit of javascript to calculate the position of every text using the getComputedTextLength() method.
let h = hello.getComputedTextLength();
time.setAttributeNS(null,"x", 10 + h + 20 )
let t = time.getComputedTextLength();
dfsdf.setAttributeNS(null,"x", 10 + h + 20 + t + 20 )<svg width="500" height="300" viewBox="-6 -6 512 312">
<g>
<path d="M15,0h470a15,15 0 0 1 15,15v270a15,15 0 0 1 -15,15h-470a15,15 0 0 1 -15,-15v-270a15,15 0 0 1 15,-15z" id="stroke-path" fill="none" stroke="#000000" stroke-width="12"></path>
</g>
<g>
<text id="hello" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(253, 98, 94);" text-anchor="start" x="10" y="128.50210571289062">Hello</text>
<title>Hello</title>
</g>
<g>
<text id="dfsdf" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(254, 150, 102);" text-anchor="start" x="381.7397880554199" y="128.50210571289062">dfsdf</text>
<title>dfsdf</title>
</g>
<g>
<text id="time" alignment-baseline="middle" style="font-family: Arial; font-size: 36px; font-style: normal; font-weight: normal; fill: rgb(127, 49, 47);" text-anchor="start" x="60.4056510925293" y="128.50210571289062">1/1/2018 4:00:00 AM</text>
<title>1/1/2018 4:00:00 AM</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 16px; font-style: normal; font-weight: normal; fill: rgb(1, 138, 128);" text-anchor="start" x="10" y="162.99429321289062">Earliest Date Time End</text>
<title>Earliest Date Time End</title>
</g>
</svg>An alternative solution would be positioning the text like this:
Hello: text-anchor="start" x="10"
dfsdf: text-anchor="end" x="490"
time: text-anchor="middle" x="250"
<svg width="500" height="300" viewBox="-6 -6 512 312">
<g>
<path d="M15,0h470a15,15 0 0 1 15,15v270a15,15 0 0 1 -15,15h-470a15,15 0 0 1 -15,-15v-270a15,15 0 0 1 15,-15z" id="stroke-path" fill="none" stroke="#000000" stroke-width="12"></path>
</g>
<g>
<text id="hello" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(253, 98, 94);" text-anchor="start" x="10" y="128.50210571289062">Hello</text>
<title>Hello</title>
</g>
<g>
<text id="dfsdf" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(254, 150, 102);" text-anchor="end" x="490" y="128.50210571289062">dfsdf</text>
<title>dfsdf</title>
</g>
<g>
<text id="time" alignment-baseline="middle" style="font-family: Arial; font-size: 36px; font-style: normal; font-weight: normal; fill: rgb(127, 49, 47);" text-anchor="middle" x="250" y="128.50210571289062">1/1/2018 4:00:00 AM</text>
<title>1/1/2018 4:00:00 AM</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 16px; font-style: normal; font-weight: normal; fill: rgb(1, 138, 128);" text-anchor="start" x="10" y="162.99429321289062">Earliest Date Time End</text>
<title>Earliest Date Time End</title>
</g>
</svg>let h = hello.getComputedTextLength();
time.setAttributeNS(null,"x", 10 + h + 20 )
let t = time.getComputedTextLength();
dfsdf.setAttributeNS(null,"x", 10 + h + 20 + t + 20 )<svg width="500" height="300" viewBox="-6 -6 512 312">
<g>
<path d="M15,0h470a15,15 0 0 1 15,15v270a15,15 0 0 1 -15,15h-470a15,15 0 0 1 -15,-15v-270a15,15 0 0 1 15,-15z" id="stroke-path" fill="none" stroke="#000000" stroke-width="12"></path>
</g>
<g>
<text id="hello" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(253, 98, 94);" text-anchor="start" x="10" y="128.50210571289062">Hello</text>
<title>Hello</title>
</g>
<g>
<text id="dfsdf" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(254, 150, 102);" text-anchor="start" x="381.7397880554199" y="128.50210571289062">dfsdf</text>
<title>dfsdf</title>
</g>
<g>
<text id="time" alignment-baseline="middle" style="font-family: Arial; font-size: 36px; font-style: normal; font-weight: normal; fill: rgb(127, 49, 47);" text-anchor="start" x="60.4056510925293" y="128.50210571289062">1/1/2018 4:00:00 AM</text>
<title>1/1/2018 4:00:00 AM</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 16px; font-style: normal; font-weight: normal; fill: rgb(1, 138, 128);" text-anchor="start" x="10" y="162.99429321289062">Earliest Date Time End</text>
<title>Earliest Date Time End</title>
</g>
</svg>let h = hello.getComputedTextLength();
time.setAttributeNS(null,"x", 10 + h + 20 )
let t = time.getComputedTextLength();
dfsdf.setAttributeNS(null,"x", 10 + h + 20 + t + 20 )<svg width="500" height="300" viewBox="-6 -6 512 312">
<g>
<path d="M15,0h470a15,15 0 0 1 15,15v270a15,15 0 0 1 -15,15h-470a15,15 0 0 1 -15,-15v-270a15,15 0 0 1 15,-15z" id="stroke-path" fill="none" stroke="#000000" stroke-width="12"></path>
</g>
<g>
<text id="hello" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(253, 98, 94);" text-anchor="start" x="10" y="128.50210571289062">Hello</text>
<title>Hello</title>
</g>
<g>
<text id="dfsdf" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(254, 150, 102);" text-anchor="start" x="381.7397880554199" y="128.50210571289062">dfsdf</text>
<title>dfsdf</title>
</g>
<g>
<text id="time" alignment-baseline="middle" style="font-family: Arial; font-size: 36px; font-style: normal; font-weight: normal; fill: rgb(127, 49, 47);" text-anchor="start" x="60.4056510925293" y="128.50210571289062">1/1/2018 4:00:00 AM</text>
<title>1/1/2018 4:00:00 AM</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 16px; font-style: normal; font-weight: normal; fill: rgb(1, 138, 128);" text-anchor="start" x="10" y="162.99429321289062">Earliest Date Time End</text>
<title>Earliest Date Time End</title>
</g>
</svg><svg width="500" height="300" viewBox="-6 -6 512 312">
<g>
<path d="M15,0h470a15,15 0 0 1 15,15v270a15,15 0 0 1 -15,15h-470a15,15 0 0 1 -15,-15v-270a15,15 0 0 1 15,-15z" id="stroke-path" fill="none" stroke="#000000" stroke-width="12"></path>
</g>
<g>
<text id="hello" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(253, 98, 94);" text-anchor="start" x="10" y="128.50210571289062">Hello</text>
<title>Hello</title>
</g>
<g>
<text id="dfsdf" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(254, 150, 102);" text-anchor="end" x="490" y="128.50210571289062">dfsdf</text>
<title>dfsdf</title>
</g>
<g>
<text id="time" alignment-baseline="middle" style="font-family: Arial; font-size: 36px; font-style: normal; font-weight: normal; fill: rgb(127, 49, 47);" text-anchor="middle" x="250" y="128.50210571289062">1/1/2018 4:00:00 AM</text>
<title>1/1/2018 4:00:00 AM</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 16px; font-style: normal; font-weight: normal; fill: rgb(1, 138, 128);" text-anchor="start" x="10" y="162.99429321289062">Earliest Date Time End</text>
<title>Earliest Date Time End</title>
</g>
</svg><svg width="500" height="300" viewBox="-6 -6 512 312">
<g>
<path d="M15,0h470a15,15 0 0 1 15,15v270a15,15 0 0 1 -15,15h-470a15,15 0 0 1 -15,-15v-270a15,15 0 0 1 15,-15z" id="stroke-path" fill="none" stroke="#000000" stroke-width="12"></path>
</g>
<g>
<text id="hello" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(253, 98, 94);" text-anchor="start" x="10" y="128.50210571289062">Hello</text>
<title>Hello</title>
</g>
<g>
<text id="dfsdf" alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 22.6667px; font-style: normal; font-weight: normal; fill: rgb(254, 150, 102);" text-anchor="end" x="490" y="128.50210571289062">dfsdf</text>
<title>dfsdf</title>
</g>
<g>
<text id="time" alignment-baseline="middle" style="font-family: Arial; font-size: 36px; font-style: normal; font-weight: normal; fill: rgb(127, 49, 47);" text-anchor="middle" x="250" y="128.50210571289062">1/1/2018 4:00:00 AM</text>
<title>1/1/2018 4:00:00 AM</title>
</g>
<g>
<text alignment-baseline="middle" style="font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 16px; font-style: normal; font-weight: normal; fill: rgb(1, 138, 128);" text-anchor="start" x="10" y="162.99429321289062">Earliest Date Time End</text>
<title>Earliest Date Time End</title>
</g>
</svg>answered Mar 9 at 7:35
enxanetaenxaneta
10.5k2821
edited Mar 9 at 11:54
answered Mar 9 at 7:35
enxanetaenxaneta
10.5k2821
answered Mar 9 at 7:35
enxanetaenxaneta
10.5k2821
answered Mar 9 at 7:35
enxanetaenxaneta
10.5k2821
10.5k2821
In your first example you are adding 20px constant spacing between them. But what I am trying to do is just based on dynamic width of this text elements. I am usinggetBoundingClientRectfunction in javascript to get width of group elements.
– Bhavesh Jadav
Mar 9 at 10:36
I'm not very sure I understand your comment. You can easily remove the 20units or change it to a different value. I'm usinggetComputedTextLength()to get the length of text and the result is the same as the one I would get withgetBBox(). Do not usegetBoundingClientRect
– enxaneta
Mar 9 at 11:54
I have usegetBoundingClientRectbecausegetBBoxis not supported in IE
– Bhavesh Jadav
Mar 10 at 3:18
add a comment |
In your first example you are adding 20px constant spacing between them. But what I am trying to do is just based on dynamic width of this text elements. I am usinggetBoundingClientRectfunction in javascript to get width of group elements.
– Bhavesh Jadav
Mar 9 at 10:36
I'm not very sure I understand your comment. You can easily remove the 20units or change it to a different value. I'm usinggetComputedTextLength()to get the length of text and the result is the same as the one I would get withgetBBox(). Do not usegetBoundingClientRect
– enxaneta
Mar 9 at 11:54
I have usegetBoundingClientRectbecausegetBBoxis not supported in IE
– Bhavesh Jadav
Mar 10 at 3:18
In your first example you are adding 20px constant spacing between them. But what I am trying to do is just based on dynamic width of this text elements. I am using
getBoundingClientRect function in javascript to get width of group elements.– Bhavesh Jadav
Mar 9 at 10:36
In your first example you are adding 20px constant spacing between them. But what I am trying to do is just based on dynamic width of this text elements. I am using
getBoundingClientRect function in javascript to get width of group elements.– Bhavesh Jadav
Mar 9 at 10:36
I'm not very sure I understand your comment. You can easily remove the 20units or change it to a different value. I'm using
getComputedTextLength() to get the length of text and the result is the same as the one I would get with getBBox(). Do not use getBoundingClientRect – enxaneta
Mar 9 at 11:54
I'm not very sure I understand your comment. You can easily remove the 20units or change it to a different value. I'm using
getComputedTextLength() to get the length of text and the result is the same as the one I would get with getBBox(). Do not use getBoundingClientRect – enxaneta
Mar 9 at 11:54
I have use
getBoundingClientRect because getBBox is not supported in IE– Bhavesh Jadav
Mar 10 at 3:18
I have use
getBoundingClientRect because getBBox is not supported in IE– Bhavesh Jadav
Mar 10 at 3:18
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');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55074001%2fsvg-element-overlapping-even-with-correct-x-and-y%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
If you remove the white space gaps between the date string, the widths line up well and no overlapping occurs. I don't understand what's really going on, though! So frustrating.
– Andy Hoffman
Mar 9 at 5:05
I think the calculated width of date is including whitespace inisde date because when I remove the space, it also reduces width to 302
– Bhavesh Jadav
Mar 9 at 5:20
Your viewBox units are no longer pixels, so a measurement using ClientRect (which return pixel values) won't match the SVG unit system anymore. This could be at least part of it.
– Michael Mullany
Mar 9 at 23:34
@MichaelMullany So what will be the correct approach here? Is there a method to calculate it properly?
– Bhavesh Jadav
Mar 10 at 3:20