Получить размер пути в SVG

Question

Мне нужно получить размер на экране в SVG из JavaScript.

У меня нет никаких «преобразований» или «масштабирования» (преобразование, масштабирование) в моем SVG. Единственное, что изменилось, это viewBox, который изменит размер всех элементов в SVG.

Я использовал myPath.getBBox (), возвращаемая ширина остается неизменной, даже если я меняю свой viewBox.

Так что мне интересно, как связаны этот viewBox и размер пути. Может быть, есть функция для вычисления ширины?

Answer 1

Вы можете вызвать getBoundingClientRect() метод на вашем пути, чтобы получить размеры.Он вернет объект ClientRect:

var w = myPath.getBoundingClientRect().width;
var h = myPath.getBoundingClientRect().height;

Существует также метод getScreenCTM(), который возвращает матрицу преобразования в текущих пикселях экрана элемента, для которого он был вызван.спецификация говорит :

[getScreenCTM ()] Возвращает матрицу преобразования из текущих пользовательских единиц (т. е. после применения атрибута 'transform', если есть) к родительскому элементууведомление агента пользователя о «пикселе».[...] Обратите внимание, что null возвращается, если этот элемент не подключен к дереву документа.

Answer 2

Прежде всего, имейте в виду, что path не может иметь ширину.Это набор координат.Браузер использует эту информацию вместе с методом рисования, чтобы соединить координаты и создать видимую фигуру.

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

Обходным путем, я думаю, было бы получить ширину элемента conatiner для SVG (div или что-то еще).

Может быть, некоторые из библиотек могут предоставить какой-то служебный метод для выяснения этого.