Ich versuche SVG-Rechteck um SVG-Text zu machen. Wenn ich .width()
oder .height()
auf SVG-Text verwenden möchte, gibt Chrome zurück, was ich erwarte, aber Firefox nicht. Hier ist der Link zu jsfiddle Demo ich gemacht.JQuery Breite und Höhe funktioniert nicht auf SVG in Firefox
$(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;
}
jQuery ist ausschließlich mit HTML-Elementen zu arbeiten. Nur eine begrenzte Anzahl seiner Funktionen wird auf SVG-Elementen funktionieren. –