problème HTML5 SVG jQuery dans FireFox 3.6

Voici mon fichier HTML (jQuery nécessaire et activer HTML5 dans FireFox about: config)problème HTML5 SVG jQuery dans FireFox 3.6

<!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 . Dans firebug, le carré rectangle rouge est comme ceci assombri.

Source

2010-06-28 sam

Si votre page ne contient pas également le doctype HTML5? ' 'IIRC, l'analyseur HTML5 dans Firefox est plus strict sur le balisage. De même, vous pourriez avoir besoin de '' pour envelopper votre contenu javascript. – scunliffe

oh, et dans jQuery 1.4.x je pense que vous devez utiliser: '$ (document). Ready();' syntaxe pour mettre en place une fonction "prêt" de document approprié. voir ici: http://jquery14.com/day-01/jquery-14 la syntaxe courte a été dépréciée: "La technique jQuery(). ready() fonctionne encore dans la version 1.4 mais elle a été abandonnée. Veuillez utiliser soit jQuery (document) .ready() ou jQuery (function() {}). " – scunliffe

Ainsi, 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>

Source

2010-06-28 13:02:59 sam

Tout d'abord vous manquez le doctype html5 qui est mis en œuvre comme si

<!DOCTYPE html>

en haut de votre document.

alors 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); 
});

Essayez-le.

Source

2010-06-28 10:51:18 RobertPitt

Non, ça ne marche pas mieux. Comme je l'ai déjà dit, dans firebug, le code html que j'ajoute est en style gris. – sam

Code mis à jour pour envelopper le html de rect dans une fonction jquery, puis obtenu jQuery pour renvoyer html valide. – RobertPitt

Rien ne change avec cette modification. – sam

Un peu plus tard, mais au lieu d'ajouter l'espace de nom à la doc en utilisant jQuery, vous pouvez l'ajouter comme attribut le tag <svg>:

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 300px 600px"> 
    ... 
</svg>

Source

2012-02-03 16:15:53 gib

problème HTML5 SVG jQuery dans FireFox 3.6

Répondre

Questions connexes