如何做响应SVG和文本并排？

Question

我试图创建一个包含一个方形SVG标志和一个名称，并排，将很好地调整浏览器窗口的标题。

我在头文件中有＃个DOG和#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

你几乎在那里，我缓存选择这样它的效率更高：

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/

Answer 2

这解决您的代码：

SEE DEMO

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

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