Получить ограничивающую рамку выбранного элемента SVG

Question

Я хочу читать:

• width,height,x,y измерения

для конкретного элемента SVG.

---

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

Как я могу получить доступ к этому?

Answer 1

Предполагая, что у вас есть ручка для элемента, я думаю, что это сработает, нет?

box = svgedit.utilities.getBBox(selected);

Answer 2

Если у вас есть ссылка на узел DOM, используйте

svgNode.getBoundingClientRect()

https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect

Edit: SVG Edit имеет метод для возврата выбранных в данный момент элементов:

svgCanvas.getSelectedElems()

так в приведенном выше примере:

svgNode = svgCanvas.getSelectedElems()[0];
svgNode.getBoundingClientRect();

Answer 3

Пожалуйста, смотрите http://granite.sru.edu/~ddailey/svg/BBox0M.svg для примера и ответа.

Вкратце, этот код работает для меня в Chrome:

<script>
function foo(evt)
{
    console.log(evt.target.getBBox());      
}
</script>

<svg>
    <circle onclick="foo(evt)" r="20%" cx="50%" cy="50%"/>
</svg>

Answer 4

Я не уверен, правильно ли я вас понимаю, но если вы хотите получить высоту или ширину элемента jQuery, используйте width() и height():

log("The svg is " + $("img").width() + "px wide.");
log("The svg is " + $("img").height() + "px tall.");

Пример JSFiddle: http://jsfiddle.net/gGWU4/