problema HTML5 SVG jQuery in Firefox 3.6
-
01-10-2019 - |
Domanda
Ecco il mio file HTML (jQuery necessario e attivare HTML5 in Firefox about: config)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('svg').append("<rect x='100px' y='0px' height='100px' width='100px' fill='red' />");
})
</script>
</head>
<body>
<svg viewbox="0 0 300px 600px">
<rect x='0px' y='0px' height='100px' width='100px' fill='blue' />
</svg>
</body>
</html>
Il problema è che non riesco a vedere rettangolo rosso quando carico questa pagina. Nel Firebug, il quadrato rettangolo rosso è così buia.
Soluzione
Così, sembra essere un problema namespace, il seguente codice funziona
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
rect = document.createElementNS('http://www.w3.org/2000/svg', "rect");
rect.setAttribute("x", "100");
rect.setAttribute("y", "0");
rect.setAttribute("width", "100");
rect.setAttribute("height", "100");
rect.setAttribute("fill", "red");
$('svg').append(rect);
})
</script>
</head>
<body>
<svg viewbox="0 0 200 100" width="200px" height="100px">
<rect x='0px' y='0px' height='100px' width='100px' fill='blue' />
</svg>
</body>
</html>
Altri suggerimenti
In primo luogo vi state perdendo il DOCTYPE HTML5 che viene realizzato in questo modo
<!DOCTYPE html>
nella parte superiore del documento.
allora avete bisogno di aggiungere un documento pronto!
$(document).ready(function(){
//The code here runs when the document is fully loaded into the DOM.
//Create a blank rect, add its attributes
the_box = $("<rect/>")
.attr('x','100px').attr('y','0px')
.attr('height','100px').attr('width','100px')
.attr('fill','red');
//Append the jQuery variable to the selector.
$('svg[viewbox]').append(the_box);
});
Dare che un andare.
Un po 'tardi, ma invece di aggiungere lo spazio nome al documento utilizzando jQuery, è possibile aggiungerlo come un attributo nel tag <svg>
:
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 300px 600px">
...
</svg>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow