Подтвердить что ты не робот

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

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

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

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

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

4b9b3361

Ответ 1

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

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

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

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

Ответ 2

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

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

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

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