Home/ Questions/Q 8923915
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T07:15:32+00:00

I’ve just started out a small project to test animation with svg with jQuery,

  • 0

I’ve just started out a small project to test animation with svg with jQuery, and has started of by creating rect’s dynamically. However, something is wrong in my code below because even if I can see the created svg elements in the Inspector, they’re not to be seen in the browser.

Why is it like this and what can I change to make the rect’s be seen? I have tried the code in Chrome, Firefox and Safari.

jsFiddle: http://jsfiddle.net/JFACW/

js:

$(document).ready(function() {

    var NR_OF_FLAKES = 100,
               flake = $('.flake'),
                   x = flake.attr('x'),
                   y = flake.attr('y'),
                 svg = $('#svg');

    for(var i = 0; i < NR_OF_FLAKES; i++) {

        var xPos = randomize('width'),
            yPos = randomize('height');

        $('svg').append('<rect class="flake" width="5" height="5" x=' + xPos + ' y=' + yPos + '/>');
    }

    flake.attr('x');

    var height = $(window).height();

    function randomize(direction) {

        if (direction == 'width')
            direction = $(window).width();
        else
            direction = $(window).height();

        var rand = Math.floor((Math.random() * direction) + 1);

        return rand;
    }
});

html:

...
<body>
    <div id="box2">
        <svg id="svg" xmlns="http://www.w3.org/2000/svg" height="1600" version="1.1"></svg>
    </div>
</body>
...

css:

rect.flake {
    fill: rgb(255,205,0);
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is a duplicate of jquery's append not working with svg element?

    SVG doesn’t have innerHTML, therefore .append does not work. For further information, see the linked question.

    Edit: This might not be the full truth. jQuery seems to append rect elements that are not in the SVG namespace, but they have to be.

    • 0