Получить размер пути в SVG
Мне нужно получить размер на экране "lt > path" в SVG из JavaScript.
У меня нет никакого "преобразования" или "масштабирования" (преобразования, масштаб) на моем SVG.
Единственное, что изменилось, это viewBox, который изменит размер всех элементов в SVG.
Я использую myPath.getBBox(), возвращаемая ширина остается прежней, хотя я меняю свой viewBox.
Так что мне интересно, что такое отношение к этому viewBox и размеру пути. Может быть, есть функция для вычисления ширины?
Ответы
Ответ 1
Вы можете вызвать метод getBoundingClientRect() на вашем пути, чтобы получить размеры. Он вернет объект ClientRect:
var w = myPath.getBoundingClientRect().width;
var h = myPath.getBoundingClientRect().height;
Существует также метод getScreenCTM(), который возвращает матрицу преобразования в текущем пикселе экрана элемента, на который он был вызван.
spec говорит:
[getScreenCTM()] Возвращает матрицу преобразования из текущих пользовательских единиц (т.е. после применения атрибута преобразования, если таковые имеются) в уведомление родительского пользовательского агента о "пикселе". [...] Обратите внимание, что null возвращается, если этот элемент не подключен к дереву документов.
Ответ 2
Прежде всего, имейте в виду, что path не может иметь ширину. Его набор коордов. Браузер использует эту информацию вместе с методом рисования для подключения коордов и создания видимой формы.
Во-вторых, ограничивающая рамка - это моментальный снимок, когда SVG был визуализирован. Вот почему вы не получаете обновленную ширину при изменении размера.
Обходной путь, по-моему, заключается в том, чтобы получить ширину элемента conatiner в SVG (div или что-то еще).
Возможно, некоторые из libraries могут предоставить некоторый полезный метод, чтобы понять это.
