获取SVG元素的宽度/高度
什么是正确的方式来获得svg元素的维度？
http://jsfiddle.net/langdonx/Xkv3X/
Chrome 28：
style x client 300x100 offset 300x100
IE 10：
stylex client300x100 offsetundefinedxundefined
火狐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; }
使用getBBox函数
var bBox = svg1.getBBox(); console.log('XxY', bBox.x + 'x' + bBox.y); console.log('size', bBox.width + 'x' + bBox.height);
FireFox有getBBox（）的问题，我需要在vanillaJS中做到这一点。
我有一个更好的方法，是真正的svg.getBBox（）函数相同的结果！
有了这个好post： 获取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);
这是我发现的一贯的跨浏览器的方式：
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; };
我正在使用Firefox，而且我的工作解决scheme非常接近obysky。 唯一的区别是，你在一个svg元素中调用的方法将返回多个矩形，你需要select第一个矩形。
var chart = document.getElementsByClassName("chart")[0]; var width = chart.getClientRects()[0].width; var height = chart.getClientRects()[0].height;
从Firefox 33开始，你可以调用getBoundingClientRect（），它将正常工作，即在上面的问题中，它将返回300 x 100。
Firefox 33将于2014年10月14日发布，但如果您想尝试一下， Firefox已经在进行修补。
SVG具有属性的width和height 。 他们返回一个对象SVGAnimatedLength有两个属性： animVal和baseVal 。 该接口用于animation，其中baseVal是animation之前的值。 从我所看到的，这个方法在Chrome和Firefox中都返回一致的值，所以我认为它也可以用来计算SVG的大小。
