web-dev-qa-db-ja.com

SVG要素の幅/高さを取得

svg要素の寸法を取得する適切な方法は何ですか？

http://jsfiddle.net/langdonx/Xkv3X/

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は要素に幅と高さの属性を設定した場合にのみ設定されます。

フィドルは次のようになります。

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;
}
javascriptsvg
68
Langdon

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);
79
Pavel Gruba

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);
38
obysky

私はFirefoxを使用しており、私の作業ソリューションはobyskyに非常に近いものです。唯一の違いは、svg要素で呼び出すメソッドが複数の四角形を返すため、最初の四角形を選択する必要があることです。

var chart = document.getElementsByClassName("chart")[0];
var width = chart.getClientRects()[0].width;
var height = chart.getClientRects()[0].height;
6
Cichelero

SVGには、プロパティwidthおよびheightがあります。これらは、SVGAnimatedLengthとanimValの2つのプロパティを持つオブジェクトbaseValを返します。このインターフェイスはアニメーションに使用されます。baseValは値before animationです。私が見ることができることから、このメソッドはChromeとFirefoxの両方で一貫した値を返すため、SVGの計算されたサイズを取得するためにも使用できると思います。

6
afkatja

Firefox 33以降では、getBoundingClientRect（）を呼び出すことができ、正常に動作します。つまり、上記の質問では300 x 100を返します。

Firefox 33は2014年10月14日にリリースされますが、修正は既に Firefox nightlies にあります。

3
Robert Longson

これは私が見つけた一貫したクロスブラウザの方法です：

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;
};
3
Sergio