jquery - 如何并排进行响应式 SVG 和文本？

Question

我正在尝试创建一个由方形 SVG 徽标和名称并排组成的标题，它将与浏览器窗口一起很好地调整大小。

我的标题中有两个DIV，#logo 和#name。我在#name 上使用jQuery FitText，并为#logo 编写了一个简单的脚本以从#name 获取高度并将其用于其高度和宽度。相关位在这里：http: //jsfiddle.net/dBcdz/

<header>
    <div id="name">MY NAME</div>
    <div id="logo"></div>
    <div style="clear:both"></div>
</header>

$(document).ready(function () {
    var setLogo = new function () {
        var $size = $('#name').height();
        $('#logo').css({
            'height': $size,
            'width': $size
        });
    }
});
$(window).resize(function () {
    setLogo();
});

问题是，我无法让这两个 div 都随窗口调整大小。充其量只有名称调整大小，或者我必须重新加载页面才能使其看起来正确。任何人都可以帮忙吗？

Answer 1

这可以修复您的代码：

看演示

function setLogo() {
    var $size = $('#name').height();
    $('#logo').css({
        'height': $size,
            'width': $size
    });
}

$(document).ready(function () {
    $(window).resize(function () {
        $("#name").fitText();
        setLogo();
    }).resize();
});

Answer 2

你快到了，我正在缓存选择器，所以它更有效：

var $name = $("#name"),
    $logo = $('#logo');

function resize() { 
   var $size = $name.fitText().height();
   $logo.css({
     'height': $size,
     'width': $size
   });
}

$(document).ready(resize);
$(window).resize(resize);

http://jsfiddle.net/aXWZC/