HTML5 jQuery problema SVG en Firefox 3.6

StackOverflow https://stackoverflow.com/questions/3131391

  •  01-10-2019
  •  | 
  •  

Pregunta

Aquí está mi archivo HTML (jQuery necesaria y permitir HTML5 en 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>

El problema es que no puedo ver rectángulo rojo cuando me carga esta página. En Firebug, la plaza rectángulo rojo es como esto se oscureció.

¿Fue útil?

Solución

Por lo tanto, parece ser un problema de espacio de nombres, el código siguiente funciona 

<!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>

Otros consejos

En primer lugar que se está perdiendo el tipo de documento HTML 5 que se implementa como tal 

<!DOCTYPE html>

en la parte superior del documento.

A continuación, es necesario agregar un documento listo! 

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

Dar una que ir.

Un poco tarde, pero en lugar de añadir el espacio de nombre al documento usando jQuery, puede añadirlo como un atributo de la etiqueta <svg>: 

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 300px 600px">
  ...
</svg>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top