Chiều rộng và chiều cao của JQuery không hoạt động trên svg trong firefox

Question

Tôi đang cố gắng tạo hình chữ nhật SVG xung quanh văn bản SVG. Khi tôi muốn sử dụng .width() hoặc .height() trên văn bản SVG, Chrome sẽ trả về những gì tôi mong đợi nhưng Firefox thì không. Đây là liên kết đến jsfiddle bản demo tôi đã tạo.

$(document).ready(function(){ 
    var $rect = $(document.createElementNS('http://www.w3.org/2000/svg', 'rect')); 
    var x = 50; 
    var y = 50; 
    var fontSize = 10; 
    $rect.attr({ 
     'x' : x, 
     'y' : y, 
     'stroke' : 'black', 
     'stroke-width' : 1, 
     'fill' : 'white' 
    }); 
    $rect.appendTo($("#svgArea")); 

    var $svgText = $(document.createElementNS('http://www.w3.org/2000/svg', 'text')); 
    $svgText.attr({ 
     'x': x, 
     'y': y, 
     'font-family' : 'verdana', 
     'font-weight': 'bold', 
     'font-size' : fontSize 
    }); 

    var node = document.createTextNode("Lorem Ipsum"); 
    $svgText.append(node); 
    $svgText.appendTo($("#svgArea")); 

    var textWidth = $svgText.width(); 
    var textHeight = $svgText.height(); 

    $rect.attr({ 
     'x': x, 
     'y': y - textHeight + 3, 
     'width' : textWidth + 2, 
     'height': textHeight 
    }); 
}); 

html

<svg height="200px" width="200px" id="svgArea"> 
</svg> 

css

#svgArea{ 
    border: 1px solid black; 
} 

Answer 1

JQuery chiều rộng() và chiều cao() cuối cùng dựa vào tính chất và phương pháp của các yếu tố tự. Chrome triển khai offsetWidth trong nguyên mẫu SVGTextElement cho phép jquery trả về chiều rộng. Nhưng nó không phải là một tài sản tiêu chuẩn và Firefox không thực hiện nó.

Bạn có thể truy cập chiều rộng của phần tử văn bản svg thông qua phương thức getBBox. Bạn chỉ có thể sử dụng nó thay vì chiều rộng jquery. Như thế này:

var textWidth = $svgText.get(0).getBBox().width; 
var textHeight = $svgText.get(0).getBBox().height; 

Xem kết quả: http://jsfiddle.net/nj413nbh/1/

Xem BBox số kỹ thuật: http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#__svg__SVGLocatable__getBBox