SVG Element Overlapping Even with Correct x and y

Question

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: &quot;Segoe UI&quot;, 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: &quot;Segoe UI&quot;, 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: &quot;Segoe UI&quot;, 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.

Answer 1

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: &quot;Segoe UI&quot;, 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: &quot;Segoe UI&quot;, 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: &quot;Segoe UI&quot;, 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: &quot;Segoe UI&quot;, 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: &quot;Segoe UI&quot;, 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: &quot;Segoe UI&quot;, 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>