如果自动调整大小,如何获取嵌入式SVG元素的实际大小？

Question

我设置了一个自动调整大小的SVG,它根据父容器改变大小,同时保持纵横比.

我想将SVG元素置于父容器中心,因为父容器的尺寸不一定与SVG的尺寸相匹配.

我创造了一个小提琴来展示我的意思:http://jsfiddle.net/lazthewiz/cXx46/

HTML

<DIV>
<SVG id=svg viewBox="0 0 160 90" preserveAspectRatio="xMinYMin">
...

CSS

DIV {
    width: 200px;
    height: 200px;    
}

SVG {
    width: 100%;
    height: 100%;
}

在这种情况下,jQuery返回的或在DOM中找到的宽度和高度值都是无用的.它们要么返回零,要么返回父容器的尺寸(取决于您使用的浏览器).

有没有办法用jQuery或普通JS获取嵌入式SVG的实际尺寸？

Answer 1

我认为是这样。尚未使用 Google Chrome (33.0.1750.154 m) 以外的任何工具进行测试。对于您的代码/样式，我实际上得到的值是 200 和 112.5（而不是 200x113）

var mImg = document.getElementById('svg');
var aspect = mImg.viewBox.baseVal.height / mImg.viewBox.baseVal.width;
var width = mImg.clientWidth;
var height = width * aspect;
var msg = '';
msg += 'width: ' + width;
msg += ', ';
msg += 'height: ' + height;
document.body.appendChild( document.createTextNode(msg) );

我想如果图像很高而不是很宽，这会失败 - 但我想你可以根据 viewBox 的哪个尺寸较大（宽度或高度）来决定如何正确计算大小。