Нахождение координат центральной точки SVG - PullRequest
Новая
       1

Нахождение координат центральной точки SVG

0 голосов
/ 09 июня 2019

Я ищу решение, в котором я могу найти центр линии SVG по пути, поскольку я хочу визуализировать посторонний объект в центре SVG.

Вот мой код 

<!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>

Как вы можете видеть в приведенном выше коде для визуализации постороннего объекта, я передал статические координаты x и y как 50. Как я могу вычислить центральную точку, чтобы HI отображался точно в центре моего SVG?

1 Ответ

0 голосов
/ 11 июня 2019

Я немного искал и нашел это ответ переполнения стека

По сути, вы находите самый маленький прямоугольник, который может поместиться вокруг элемента svg, с помощью команды getBBox или getBoundingClientRect , которая возвращает элемент прямоугольника. Затем вы можете получить ширину и высоту этого элемента и разделить оба поля на два, чтобы получить центр этого прямоугольного элемента. 

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

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

Затем вы добавляете это к x и y элемента rect, чтобы получить координаты центра вашего mySVG элемента. 

centerOfmySVG_X = centerOfRect_X + surroundingRectangle.x;
centerOfmySCG_Y = centerOfRect_Y + surroundingRectangle.y;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...