Как получить высоту/ширину элемента группы SVG?

Ответ 1

svg <g> не имеют явных атрибутов высоты и ширины, они автоматически определяют размер, который они содержат. Вы можете получить их фактическую высоту/ширину, вызвав getBBox на элементе, хотя:

var height = document.getElementById("myGroup").getBBox().height;

Если вы действительно в jquery, вы можете написать его как

$('g#myGroup').get(0).getBBox().height;

в соответствии с Reed Spool

Ответ 2

Основываясь на приведенном выше ответе, вы можете создавать функции jQuery.widthSVG() и .heightSVG()

/*
 * .widthSVG(className)
 * Get the current computed width for the first element in the set of matched SVG elements.
 */

$.fn.widthSVG = function(){
    return ($(this).get(0)) ? $(this).get(0).getBBox().width : null;
};

/*
 * .heightSVG(className)
 * Get the current computed height for the first element in the set of matched SVG elements.
 */
$.fn.heightSVG = function(){
    return ($(this).get(0)) ? $(this).get(0).getBBox().height : null;
};

Ответ 3

Мне не удалось получить какие-либо ответы выше, чтобы работать, но встретил это решение для поиска его с помощью d3:

var height = d3.select('#myGroup').select('svg').node().getBBox().height;
var width = d3.select('#myGroup').select('svg').node().getBBox().width;

getBBox() здесь найдет фактическую ширину и высоту элемента группы. Легко, как это.