Элементы svg, созданные на лету, не видны

Я только что начал небольшой проект, чтобы протестировать анимацию с помощью svg с jQuery, и начал с создания динамического преобразования. Однако в моем коде что-то не так, потому что, даже если я могу видеть созданные элементы SVG в Инспекторе, их не видно в браузере.Элементы svg, созданные на лету, не видны

Почему это так, и что я могу изменить, чтобы увидеть прямоугольник? Я пробовал код в Chrome, Firefox и 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); 
}

источник

2012-11-30 holyredbeard

Задавая вопросы такого рода, пожалуйста, включают в себя то, что браузеры вы проверили, как хорошо. – RonaldBarzell

Можете ли вы предоставить jsfiddle для этого? – Nelson

Забыл сделать это, исправлено. – holyredbeard

Это дубликат jquery's append not working with svg element?

SVG не innerHTML, поэтому .append не работает. Для получения дополнительной информации см. Связанный вопрос.

Редактировать: Это может быть не полная истина. Кажется, что jQuery добавляет rect элементов, которые не находятся в пространстве имен SVG, но они должны быть.

источник

2012-11-30 23:33:41

Да, это должна быть проблема, кстати, для создания svg на лету я рекомендую OP классную библиотеку Raphael svg http://raphaeljs.com. – Nelson

Хорошо, спасибо. Не так ли! – holyredbeard

Просто канаву JQuery и идти чисто JavaScript:

var NR_OF_FLAKES = 100, 
      svg = document.querySelector('svg'), 
      xmlns = "http://www.w3.org/2000/svg"; 

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

    var xPos = Math.random()*window.innerWidth, 
     yPos = Math.random()*window.innerHeight, 
     flake = document.createElementNS(xmlns, "rect"); 

    flake.setAttribute("width", 5); 
    flake.setAttribute("height", 5); 
    flake.setAttribute("x", xPos); 
    flake.setAttribute("y", yPos); 
    flake.setAttribute("class", "flake"); 
    svg.appendChild(flake); 
}

http://jsfiddle.net/PAxyx/

источник

2012-11-30 23:58:05 Duopixel

Элементы svg, созданные на лету, не видны

ответ

Смежные вопросы