Получить ширину / высоту элемента SVG

Question

Получить ширину / высоту элемента SVG

каков правильный способ получить размеры svg элемент?

Chrome 28:

style x

client 300x100

offset 300x100

IE 10:

stylex 

client300x100 

offsetundefinedxundefined

FireFox 23:

"style" "x"

"client" "0x0"

"offset" "undefinedxundefined"

есть ширина и высота свойства svg1, а .width.baseVal.value только если я установить атрибуты width и height элемента.

скрипка выглядит так это:

HTML

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" version="1.1">

    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="1" fill="red" />

    <circle cx="150" cy="50" r="40" stroke="black" stroke-width="1" fill="green" />

    <circle cx="250" cy="50" r="40" stroke="black" stroke-width="1" fill="blue" />

</svg>

JS

var svg1 = document.getElementById('svg1');



console.log(svg1);

console.log('style', svg1.style.width + 'x' + svg1.style.height);

console.log('client', svg1.clientWidth + 'x' + svg1.clientHeight);

console.log('offset', svg1.offsetWidth + 'x' + svg1.offsetHeight);

CSS

#svg1 {

    width: 300px;

    height: 100px;

}

1298 7

javascript svg

7 ответов:

Comments

Ничего не найдено.

Pavel Gruba · Accepted Answer · 2013-08-09 16:45:27

использовать функцию getBBox

http://jsfiddle.net/Xkv3X/1/
var bBox = svg1.getBBox();
console.log('XxY', bBox.x + 'x' + bBox.y);
console.log('size', bBox.width + 'x' + bBox.height);

obysky · Accepted Answer · 2014-07-09 12:03:49

у FireFox есть проблемы для getBBox (), мне нужно сделать это в vanillaJS.

У меня есть лучший способ и тот же результат, что и реальный svg.getBBox() функция !

С этим хорошим постом:получить реальный размер элемента SVG / G
var el   = document.getElementById("yourElement"); // or other selector like querySelector()
var rect = el.getBoundingClientRect(); // get the bounding rectangle

console.log( rect.width );
console.log( rect.height);

Cichelero · Accepted Answer · 2014-11-15 20:53:31

Я использую Firefox, и мое рабочее решение очень близко к obysky. Единственное различие заключается в том, что метод, который вы вызываете в элементе svg, вернет несколько ректов, и вам нужно выбрать первый.
var chart = document.getElementsByClassName("chart")[0];
var width = chart.getClientRects()[0].width;
var height = chart.getClientRects()[0].height;

Sergio · Accepted Answer · 2014-07-03 20:40:53

это последовательное кросс-браузер способ, который я нашел:

var heightComponents = ['height', 'paddingTop', 'paddingBottom', 'borderTopWidth', 'borderBottomWidth'],
    widthComponents = ['width', 'paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth'];

var svgCalculateSize = function (el) {

    var gCS = window.getComputedStyle(el), // using gCS because IE8- has no support for svg anyway
        bounds = {
            width: 0,
            height: 0
        };

    heightComponents.forEach(function (css) { 
        bounds.height += parseFloat(gCS[css]);
    });
    widthComponents.forEach(function (css) {
        bounds.width += parseFloat(gCS[css]);
    });
    return bounds;
};

afkatja · Accepted Answer · 2014-11-10 14:58:17

SVG имеет свойства width и height. Они возвращают объект SVGAnimatedLength С двумя свойствами: animVal и baseVal. Этот интерфейс используется для анимации, где baseVal значение до анимация. Из того, что я вижу, этот метод возвращает согласованные значения как в Chrome, так и в Firefox, поэтому я думаю, что он также может быть использован для получения расчетного размера SVG.

Robert Longson · Accepted Answer · 2014-07-09 12:23:46

начиная с Firefox 33 вы можете вызвать getBoundingClientRect () и он будет работать нормально, т. е. в вопросе выше он вернет 300 x 100.

Firefox 33 будет выпущен 14 октября 2014 года, но исправление уже в Firefox nightlies если вы хотите попробовать его.

Martin Wantke · Accepted Answer · 2018-04-20 12:46:16

метод сохранения для определения единицы ширины и высоты любой элемент (без заполнения, без полей) является следующим:
let div   = document.querySelector("div");
let style = getComputedStyle(div);

let width  = parseFloat(style.width.replace("px", ""));
let height = parseFloat(style.height.replace("px", ""));