获取SVG元素的宽度/高度


85

获取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"

在上有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;
}

Answers:


104

使用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);

10
svg尽管画了什么,没有办法将其视为HTML元素并获得该元素占用的实际大小吗?jsfiddle.net/Xkv3X/4
兰登

3
顺便说一句,我试图确定在渲染形状之前可以在其上绘制的画布的大小。
兰登

1
我认为最好检查容器的可用大小(包含svg的div),然后可以为svg设置适当的大小
Pavel Gruba 2013年

1
@Langdon在Firefox中已得到修复。Firefox 33将报告类似于Chrome的内容。
罗伯特·朗森

2
今天,我报告了使用符号/用法时,用于FireFox 38的getBoundingClientRect出现问题。在这种情况下,getBoundingClientRect将该元素扩展到viewBox的边框。此外,还有一个关于笔触宽度的已知问题。因此,getBoundingClientRect暂时不是跨浏览器解决方案。
Dzenly 2015年

50

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

这个 !正如所说的Firefox有问题,但仍然适用于大多数浏览器:)
thatOneGuy

1
当svg隐藏时返回零(例如,在bootstrap选项卡中)
Alexey Sh。

caniuse.com/#feat=getboundingclientrect-现在一切都好了,FF12 +,Chrome 4+
marksyzm 18-10-19

8

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

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

这是在transform应用CSS之前获取大小的方法。
Marko

7

SVG具有width和的属性height。它们返回SVGAnimatedLength具有两个属性的对象:animValbaseVal。此接口用于动画,其中baseVal是动画之前的值。据我所知,该方法在Chrome和Firefox中都返回一致的值,因此我认为它也可以用于获取SVG的计算大小。


svg是您的元素...让svgWidth = svg.width.baseVal.value; 让svgHeight = svg.height.baseVal.value;
鲍勃

不幸的是,目前这在Firefox上不起作用-它会为您提供一个初始值,但是如果您更改svg尺寸并再次尝试,它将为您提供原始值。
鲍勃

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

3

从Firefox 33开始,您可以调用getBoundingClientRect(),它将正常运行,即在上面的问题中它将返回300 x 100。

Firefox 33将于2014年10月14日发布,但如果您想尝试一下,此修复程序已在Firefox夜间版本中发布。


-2

确定任何元素的宽度和高度单位(无填充,无边距)的保存方法如下:

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

let width  = parseFloat(style.width.replace("px", ""));
let height = parseFloat(style.height.replace("px", ""));
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.