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中找到的 width 和 height 值在这种情况下是无用的。它们返回零或父容器的尺寸（取决于您使用的浏览器）。

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

Answer 1

我实际上找到了比进行宽高比计算更少涉及（但有点笨拙）的解决方案。

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

以一个例子：

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的小提琴：http://jsfiddle.net/lazthewiz/cXx46/5/

（在IE中，它增加了几个预期的像素，但这对于居中目的来说并不是一件大事。）

Answer 2

我估计是这样的。尚未使用谷歌浏览器（33.0.1750.154米）以外的任何其他测试。对于你的代码/样式，我实际得到的值是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的哪个尺寸更大 - 宽度或高度来决定如何正确计算尺寸。

Answer 3

这是一种跨浏览器的方法，当Div宽度=高度时效果很好。浏览器之间存在一些差异，如下所示：

function fitSVGinDiv()
{

    var divWH=parseInt(divWHValue.value)
    svgDiv.style.width=divWH+"px"
    svgDiv.style.height=divWH+"px"

    var bb=mySVG.getBBox()
    var bbw=bb.width
    var bbh=bb.height

    //--use greater of bbw vs bbh--
    if(bbw>=bbh)
        var factor=bbw/divWH
    else
        var factor=bbh/divWH

    var vbWH=divWH*factor

    var vbX=(bbw-vbWH)/2
    var vbY=(bbh-vbWH)/2
    //---IE/CH---
    if(!isFF)
    {
        var ViewBox=mySVG.viewBox.baseVal
        ViewBox.x=vbX
        ViewBox.y=vbY
        ViewBox.width=vbWH
        ViewBox.height=vbWH
    }
    else
        mySVG.setAttribute("viewBox",vbX+" "+vbY+" "+vbW+" "+vbH)

    //--requred for FF/CH---
    if(!isIE)
    {
        mySVG.setAttribute("width","100%")
        mySVG.setAttribute("height","100%")
    }
    else
    {
        mySVG.removeAttribute("width")
        mySVG.removeAttribute("height")
    }
}

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

HTML

CSS

3 个答案:

HTML

JS