我设置了一个自动调整大小的SVG,它根据父容器改变大小,同时保持纵横比.
我想将SVG元素置于父容器中心,因为父容器的尺寸不一定与SVG的尺寸相匹配.
我创造了一个小提琴,以证明我的意思：http://jsfiddle.net/lazthewiz/cXx46/
HTML
Box="0 0 160 90" preserveAspectRatio="xMinYMin">
...
CSS
DIV {
width: 200px;
height: 200px;
}
SVG {
width: 100%;
height: 100%;
}
在这种情况下,jQuery返回的或在DOM中找到的宽度和高度值都是无用的.它们要么返回零,要么返回父容器的尺寸(取决于您使用的浏览器).
有没有办法用jQuery或普通JS获取嵌入式SVG的实际尺寸？
最佳答案
实际上,我发现解决方案远不如进行宽高比计算(但有点笨拙).
诀窍是我从SVG画布的左上角到右下角创建了一条不可见的线(无笔画).
然后我得到了该行边界框的实际屏幕尺寸.
举个例子：
HTML
JS
var width=$("#dimline")[0].getBoundingClientRect().width;
var height=$("#dimline")[0].getBoundingClientRect().height;
这里有一个适用于FF,Chrome和IE的小提琴：http://jsfiddle.net/lazthewiz/cXx46/5/
(在IE中,它增加了几个像素的预期,但这对于居中目的来说并不是什么大问题).
