101

获取svg元素尺寸的正确方法是什么？

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

铬 28：

style x
client 300x100
offset 300x100

IE 10：

stylex 
client300x100 
offsetundefinedxundefined

火狐 23：

"style" "x"
"client" "0x0"
"offset" "undefinedxundefined"

上有 width 和 height 属性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;
}
4

8 回答 8

119

使用 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);
于 2013-08-09T13:45:27.057 回答
61

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);
于 2014-07-09T09:03:49.077 回答
9

我正在使用 Firefox，我的工作解决方案非常接近 obysky。唯一的区别是您在 svg 元素中调用的方法将返回多个矩形，您需要选择第一个。

var chart = document.getElementsByClassName("chart")[0];
var width = chart.getClientRects()[0].width;
var height = chart.getClientRects()[0].height;
于 2014-11-15T18:53:31.727 回答
8

SVG 具有属性width和height. 它们返回一个SVGAnimatedLength具有两个属性的对象：animVal和baseVal。这个接口是用来做动画的，这里是动画前baseVal的值。据我所知，这个方法在 Chrome 和 Firefox 中返回一致的值，所以我认为它也可以用来计算 SVG 的大小。

于 2014-11-10T12:58:17.027 回答
3

这是我发现的一致的跨浏览器方式：

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;
};
于 2014-07-03T17:40:53.923 回答
3

从 Firefox 33 起，您可以调用 getBoundingClientRect() 并且它会正常工作，即在上面的问题中它将返回 300 x 100。

Firefox 33 将于 2014 年 10 月 14 日发布，但如果您想尝试一下，该修复程序已经在Firefox nightlies中了。

于 2014-07-09T09:23:46.843 回答
0

使用 .getAttribute()！

var height = document.getElementById('rect').getAttribute("height");
var width = document.getElementById('rect').getAttribute("width");
var x = document.getElementById('rect').getAttribute("x");
alert("height: " + height + ", width: " + width + ", x: " + x);
<svg width="500" height="500">
  <rect width="300" height="100" x="50" y="50" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" id="rect"/>
</svg>

于 2021-12-11T14:44:09.587 回答
0

确定任何元素的宽度和高度单位（无填充，无边距）的保存方法如下：

let div   = document.querySelector("div");
let style = getComputedStyle(div);

let width  = parseFloat(style.width.replace("px", ""));
let height = parseFloat(style.height.replace("px", ""));
于 2018-04-20T08:59:09.800 回答