HTML5 SVG jQuery problem in FireFox 3.6

Question

Here is my HTML file (jQuery needed and enable 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>

The problem is that I can't see red rectangle when I load this page. In firebug, the red rectangle square is like this darkened.

should your page not also have the HTML5 doctype? `<! DOCTYPE html>` IIRC, the HTML5 parser in Firefox is more strict on the markup. Likewise you might need the `<![CDATA[` and `]]>` to wrap your javascript content. — scunliffe, Jun 28 '10 at 10:20
oh, and in jQuery 1.4.x I think you need to use: `$(document).ready();` syntax to set up a proper document "ready" function. see here: http://jquery14.com/day-01/jquery-14 the short syntax has been deprecated: "The jQuery().ready() technique still works in 1.4 but it has been deprecated. Please use either jQuery(document).ready() or jQuery(function(){})." — scunliffe, Jun 28 '10 at 10:22

score 2 · Accepted Answer · answered Jun 28 '10 at 13:02

So, it seems to be a namespace problem, the following code works

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

score 0 · Answer 2 · edited Jul 10 '10 at 18:38

0

Firstly you're missing the html5 doctype which is implemented like so

<!DOCTYPE html>

at the top of your document.

then you need to add a document ready!

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

Give that a go.

edited Jul 10 '10 at 18:38

Dennis Williamson

346,391
90
374
439

answered Jun 28 '10 at 10:51

RobertPitt

56,863
21
114
161

No, it doesn't work better. As I told before, in firebug, the html code I append is in gray style. – sam Jun 28 '10 at 10:57
Updated code to wrap the html of rect into a jquery function and then got jQuery to return valid html. give that a go – RobertPitt Jun 28 '10 at 11:00
Nothing changes with this modification. – sam Jun 28 '10 at 12:04
Updated, if that does not work there must be something else wrong because they should of worked :/ – RobertPitt Jun 28 '10 at 12:38

score 0 · Answer 3 · answered Feb 03 '12 at 16:15

0

A little late, but instead of adding the name space to the doc using jQuery, you can add it as an attribute on the <svg> tag:

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

answered Feb 03 '12 at 16:15

gib

149
1
2

HTML5 SVG jQuery problem in FireFox 3.6

3 Answers3