nested svg

by lollero

HTML

<script src="http://keith-wood.name/js/jquery.svg.js"></script>
<script src="http://keith-wood.name/js/jquery.svganim.js"></script>
<p>
    This exampel works as expected in Chrome 19, but NOT
    in Firefox 11 and Internet Explorer 9.
</p>

<br /><br />

<svg version="1.1" width="600" height="200">
    <text x="100" y="100" class="mediumText" id="text">jQuery rocks!</text>
</svg>

CSS

svg {
    border: 1px solid #3d3d3d;
}

JavaScript

$(document).ready(function() {    
    var body = $('body'),
        text = $('#text');
    
    body.append('<br /><strong>jQuery</strong>');
    body.append('<p>Width: ' + text.width() + '</p>');
    body.append('<p>Height: ' + text.height() + '</p>');
    
    body.append('<br /><strong>getBoundingClientRect</strong>');
    body.append('<p>Width: ' + text[0].getBoundingClientRect().width + '</p>');
    body.append('<p>Height: ' + parseInt(window.getComputedStyle(text[0]).fontSize, 10) + '</p>');
    body.append('<p>Height: ' + $('text').height() + '</p>');
});