Получить ограничительную рамку для пути SVG с помощью jQuery

Я хочу получить getBBox() для svg-пути в jquery. я пробовал вот так

$("#"+ path id)[0].getBBox() -> returns x=0,y=0,width=0,height=0

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

Как я могу вычислить ограничивающий прямоугольник для пути в SVG?

<path id="container_svg_John_0" fill="none" stroke-width="3" stroke="url(#container_svg_John0Gradient)" stroke-linecap="butt" stroke-linejoin="round" d="M -2390.2 -125.8888888888889 L 0 0 M 0 0 L 251.60000000000002 -45.77777777777778 M 251.60000000000002 -45.77777777777778 L 503.20000000000005 -11.444444444444445 M 503.20000000000005 -11.444444444444445 L 629 -183.11111111111111 "/>

Ответ 1

getBBox - это собственный SVG-метод и не является частью jquery, поэтому вам нужно написать

$("#"+ path id)[0].getBBox()

пример

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

Наиболее вероятными причинами являются то, что путь является дочерним элементом <defs>, т.е. вы используете его косвенно только в шаблоне или клипе или, наоборот, у него есть стиль отображения ни одного, и в этом случае он не будет отображаться поэтому не было бы ограничивающей рамки.

Ответ 2

~~Собственная реализация getBBox() в Webkit не работает, вы можете найти здесь отладчик ошибок~~. Фактически It исправлено сейчас

Решение состоит в использовании библиотеки SVG, которая имеет собственные алгоритмы для вычисления таких вопросов, одна из которых Raphael.js.

Вы можете использовать element.getBBox(), который делает то же самое, что и нативный getBBox().

Ответ 3

Мне тоже тяжело получить синтаксис JQuery для работы. Это вернуло Uncaught TypeError: Object [object Object] не имеет метода getBBox:

console.log($("#testtext").getBBox().width);

... потому что я опустил индекс массива (спасибо @Christian Vielma, ниже)!

Однако стандартный Javascript работал у меня, и я смог отобразить ширину (в моем случае) RECT в консоли Chrome:

console.log(document.getElementById("testtext").getBBox().width);

Итак, вы можете попробовать это.

Ответ 4

Попробуйте Element.getBoundingClientRect(). Это из HTML DOM, но у меня работает на SVG-элементах (без особых преобразований).

Ответ 5

Чтобы убедиться, что ваш svg добавлен в DOM, а не отключен. Также убедитесь, что ваш элемент SVG