Finding the center point coordinates of SVG

Question

I'm looking for a solution where I can find the center of SVG line via path since I want to render the foreign object at center of SVG.

Here is my code

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <svg>
    <g
      stroke-linecap="round"
      data-linkid="36141ffc-14b0-4375-9d40-8d002ac597fc"
      stroke-opacity="0"
      stroke-width="20"
      ><svg>
        <path
          stroke-width="10"
          stroke="rgba(255,0,0,0.5)"
          d="M68.6875,52.6875 C 68.6875,102.6875
    379.6875,331.6875 379.6875,381.6875"
          tets="Fd"
        ></path>
        <foreignObject x="50" y="50" height="100" width="40">
          <div xmlns="http://www.w3.org/1999/xhtml">
            <h1>HI</h1>
          </div>
        </foreignObject>
      </svg></g
    >
    </svg>
    <script src="src/index.js"></script>
  </body>
</html>

As you can see in the above code for rendering foreign object I have passed static x and y coordinates as 50. How can I calculate the center point so that HI is rendered exactly at the center of my SVG?

Your `
` and `
` inside. Not really sure what you are trying to do with the SVG here but you are misusing the markup. I suggest you treat the svg as a singular graphic element and place it inside html markup like `div`, then you can use some normal layout and positioning techniques to get the graphics and other HTML laid out the way you want much easier. — BugsArePeopleToo, Jun 09 '19 at 04:52
BugsArePeopleToo can you share an example if possible, I'm not sure about this — Harsh Makadia, Jun 09 '19 at 04:55
First, please fix your SVG. SVG `` elements are not valid HTML elements. They must be inside an ` — Paul LeBeau, Jun 10 '19 at 17:21

score 1 · Answer 1 · edited Nov 16 '20 at 15:14

I did some searching and found this stack overflow answer

Basically what you do is find the smallest rectangle that can fit around the svg element using the getBBox or getBoundingClientRect command which returns a rectangle element. You can then get the width and height of that element and divide both of those fields by two to get the center of that rect element.

mySVG = someRandomSVGElement;
surroundingRectangle = mySVG.getBoundingClientRect();

centerOfRect_X = surroundingRectangle.width/2;
centerOfRect_Y = surroundingRectangle.height/2;

You then add that to the x and y of the rect element to get the coordinates for the center of your mySVG element.

centerOfmySVG_X = centerOfRect_X + surroundingRectangle.x;
centerOfmySCG_Y = centerOfRect_Y + surroundingRectangle.y;

Addendum (Nov2020): with ES destructure:

        let { x, y, width, height } = svgElement.getBoundingClientRect();
        let cx = width / 2 + x;
        let cy = height / 2 + y;

Finding the center point coordinates of SVG

1 Answers1

Addendum (Nov2020): with ES destructure: