javascript - 如果嵌入的 SVG 元素是自动调整大小的，如何获取它的实际大小？

Question

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

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

我创建了一个 fiddle 来演示我的意思: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 中找到的 width 和 height 值是无用的。它们要么返回零，要么返回父容器的尺寸(取决于您使用的浏览器)。

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

Answer 1

我实际上找到了比计算长宽比要简单得多(但有点老套)的解决方案。

诀窍是我从 SVG Canvas 的左上角到右下角创建了一条不可见的线(无描边)。然后我得到了该行边界框的实际屏幕尺寸。

举个例子:

HTML

<SVG viewBox="0 0 160 90" ...>
   ...
   <line x1=0 y1=0 x2=160 y2=90 id=dimline />
</SVG>

JS

var width=$("#dimline")[0].getBoundingClientRect().width;
var height=$("#dimline")[0].getBoundingClientRect().height;

这是一个适用于 FF、Chrome 和 IE 的 fiddle :http://jsfiddle.net/lazthewiz/cXx46/5/

(在 IE 中，它会增加几个预期的像素，但这对于居中目的来说并不是什么大问题)。