我设置了一个自动调整大小的 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 的实际尺寸?
最佳答案
我实际上找到了比计算长宽比要简单得多(但有点老套)的解决方案。
诀窍是我从 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 中,它会增加几个预期的像素,但这对于居中目的来说并不是什么大问题)。
关于javascript - 如果嵌入的 SVG 元素是自动调整大小的,如何获取它的实际大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22962416/