Вычислить координаты ограничивающего прямоугольника из координат текстового объекта SVG - PullRequest
Новая
       49

Вычислить координаты ограничивающего прямоугольника из координат текстового объекта SVG

0 голосов
/ 09 февраля 2020

В настоящее время я пытаюсь выяснить, как SVG. js вычисляет скорректированный ограничивающий прямоугольник x, y координаты (верхний левый угол) из текстового объекта SVG.

Мой объект SVG выглядит следующим образом : 

<svg  xmlns="http://www.w3.org/2000/svg" width="266" height="59" viewBox="0 0 266 59">
  <text id="TText" data-name="TText" fill="#707070" font-size="50" font-family="Boogaloo"><tspan x="0" y="0">TText</tspan></text>
</svg>

Если я добавлю этот код в SVG. js, тогда позиция будет смещена по оси y на 11 пикселей (я предполагаю, что это позиция, учитывая, что SVG основан на базовой линии) , Может кто-нибудь объяснить, как вычисляются координаты x и y в ограничительной рамке. Я пытался решить это, копаясь в репозитории SVG. js, но не смог решить это сам.

Я бы предположил, что это основано на шрифте? Если это так, как можно извлечь эту информацию из файла шрифтов?

Вот мой код SVG. js, который показывает исправленные координаты ограничивающего прямоугольника X, Y. 

var draw = SVG().addTo('body');
var text = draw.text('TText');
text.font({
  family: 'Boogaloo',
  size: 50,
});
console.log(text.bbox());

1 Ответ

0 голосов
/ 09 февраля 2020

Простой ответ: мы используем API браузера, чтобы получить ограничивающий прямоугольник (el.getBBox()). Наш bbox() метод - это просто обертка вокруг этого. В случае текста мы не вычисляем исправленную ограничивающую рамку. При перемещении текста задействованы некоторые маги c, потому что текст обычно перемещается по его базовой линии, но мы унифицировали API, чтобы все фигуры перемещались по их верхнему левому углу.

Если вы хотите знать, как браузер вычисляет ограничивающую рамку текста, вы можете посмотреть на этот ответ: воспроизвести ограничивающую рамку текста в браузерах

TL: DR числа, которые вы получаете, отличаются от браузера к браузеру. И из c вам нужен файл шрифта

...