jQueryの幅と高さがFirefoxでsvgで機能しない

Question

SVGテキストの周囲にSVG四角形を作成しようとしています。 SVGテキストで.width()または.height()を使用したい場合、Chromeは期待通りの結果を返しますが、Firefoxでは返されません。ここに私が作ったjsfiddleデモへのリンクです。

$(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の幅（）と高さ（）最終的特性および要素自体の方法に依存しています。 ChromeはoffsetWidthをSVGTextElementプロトタイプに実装しています。これによりjqueryは幅を返すことができます。しかし、それは標準的なプロパティではなく、Firefoxはそれを実装していません。

svgテキスト要素の幅には、getBBoxメソッドを使用してアクセスできます。 jqueryの幅の代わりに単純に使うことができます。このように：http://jsfiddle.net/nj413nbh/1/

を参照してくださいにBBox仕様：

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

は結果を参照してくださいhttp://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#__svg__SVGLocatable__getBBox