JQuery的寬度和高度不工作在Firefox的svg

我想使SVG文本週圍的SVG矩形。當我想要在SVG文本上使用.width()或.height()時，Chrome會返回我所期望的，但Firefox不會。這裏是我製作的jsfiddle演示的鏈接。JQuery的寬度和高度不工作在Firefox的svg

$(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; 
}

來源

2016-01-10 TomP

jQuery的設計，只有HTML元素的工作。只有有限數量的功能可用於SVG元素。 –

JQuery的寬度（）和高度（）最終依靠屬性和元素本身的方法。 Chrome在SVGTextElement原型中實現了一個offsetWidth，它允許jquery返回一個寬度。但它不是一個標準的屬性，Firefox不實現它。

您可以通過getBBox方法訪問svg文本元素的寬度。你可以簡單地使用它而不是jQuery寬度。就像這樣：

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

見結果：http://jsfiddle.net/nj413nbh/1/

見BBOX規格：http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#__svg__SVGLocatable__getBBox

來源

2016-01-11 01:20:46

我覺得這將選擇所有的SVG文本...但我可以得到我想要的確切文本？ – TomP

你可以使用** $ svgText [0] **或** $ svgText.get（0）**，你只需要從你的jQuery對象訪問SVG元素。 –

JQuery的寬度和高度不工作在Firefox的svg

回答

相關問題