javascript 获取SVG元素的宽度/高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18147915/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get width/height of SVG element
提问by Langdon
What is the proper way to get the dimensions of an svgelement?
获取svg元素尺寸的正确方法是什么？
http://jsfiddle.net/langdonx/Xkv3X/
http://jsfiddle.net/langdonx/Xkv3X/
Chrome 28:
铬 28：
style x
client 300x100
offset 300x100
IE 10:
IE 10：
stylex
client300x100
offsetundefinedxundefined
FireFox 23:
火狐 23：
"style" "x"
"client" "0x0"
"offset" "undefinedxundefined"
There are width and height properties on svg1, but .width.baseVal.valueis only set if I set the width and height attributes on the element.
上有宽度和高度属性svg1，但.width.baseVal.value只有在元素上设置宽度和高度属性时才会设置。
The fiddle looks like this:
小提琴看起来像这样：
HTML
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
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
CSS
#svg1 {
width: 300px;
height: 100px;
}
回答by Pavel Gruba
Use getBBox function
使用 getBBox 函数
var bBox = svg1.getBBox();
console.log('XxY', bBox.x + 'x' + bBox.y);
console.log('size', bBox.width + 'x' + bBox.height);
回答by obysky
FireFox have problemes for getBBox(), i need to do this in vanillaJS.
FireFox 对 getBBox() 有问题，我需要在 vanillaJS 中执行此操作。
I've a better Way and is the same result as real svg.getBBox() function !
我有更好的方法，结果与真正的 svg.getBBox() 函数相同！
With this good post : Get the real size of a SVG/G element
这篇好文章：获取 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);
回答by afkatja
SVG has properties widthand height. They return an object SVGAnimatedLengthwith two properties: animValand baseVal. This interface is used for animation, where baseValis the value beforeanimation. From what I can see, this method returns consistent values in both Chrome and Firefox, so I think it can also be used to get calculated size of SVG.
SVG 具有属性width和height. 它们返回一个SVGAnimatedLength具有两个属性的对象：animVal和baseVal。该接口用于动画，动画前baseVal的值在哪里。据我所知，此方法在 Chrome 和 Firefox 中返回一致的值，因此我认为它也可以用于获取 SVG 的计算大小。
回答by Cichelero
I'm using Firefox, and my working solution is very close to obysky. The only difference is that the method you call in an svg element will return multiple rects and you need to select the first one.
我正在使用 Firefox，我的工作解决方案非常接近 obysky。唯一的区别是您在 svg 元素中调用的方法将返回多个矩形，您需要选择第一个。
var chart = document.getElementsByClassName("chart")[0];
var width = chart.getClientRects()[0].width;
var height = chart.getClientRects()[0].height;
回答by Robert Longson
From Firefox 33 onwards you can call getBoundingClientRect() and it will work normally, i.e. in the question above it will return 300 x 100.
从 Firefox 33 开始，您可以调用 getBoundingClientRect() 并且它会正常工作，即在上面的问题中它将返回 300 x 100。
Firefox 33 will be released on 14th October 2014 but the fix is already in Firefox nightliesif you want to try it out.
Firefox 33 将于 2014 年 10 月 14 日发布，但如果您想尝试一下，修复程序已经在Firefox nightlies 中。
回答by Sergio
This is the consistent cross-browser way I found:
这是我发现的一致的跨浏览器方式：
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;
};
回答by Martin Wantke
A save method to determine the width and height unit of anyelement (no padding, no margin) is the following:
确定任何元素的宽度和高度单位（无填充，无边距）的保存方法如下：
let div = document.querySelector("div");
let style = getComputedStyle(div);
let width = parseFloat(style.width.replace("px", ""));
let height = parseFloat(style.height.replace("px", ""));
