HTML5 problème SVG jQuery dans FireFox 3.6
-
01-10-2019 - |
Question
Voici mon fichier HTML (jQuery nécessaire et activer HTML5 dans 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>
Le problème est que je ne peux pas voir rectangle rouge lorsque je charge cette page. En Firebug, la place du rectangle rouge est comme ça sombre.
La solution
Alors, il semble être un problème d'espace de noms, le code suivant fonctionne
<!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>
Autres conseils
Tout d'abord vous manque le doctype html5 qui est mis en œuvre comme si
<!DOCTYPE html>
en haut de votre document.
vous devez ajouter un document prêt!
$(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);
});
communiquer qu'un aller.
Un peu en retard, mais au lieu d'ajouter l'espace de nom à la doc en utilisant jQuery, vous pouvez l'ajouter comme attribut sur la balise <svg>
:
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 300px 600px">
...
</svg>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow