0

jQueryを使用してsvgでアニメーションをテストする小さなプロジェクトを開始したばかりで、rectを動的に作成することから始めました。ただし、以下のコードには問題があります。作成されたsvg要素がインスペクターに表示されていても、ブラウザーには表示されないためです。

なぜこのようになっているのですか？また、rectを表示するために何を変更できますか？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);
}
4

2 に答える 2

2

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

</ p>

http://jsfiddle.net/PAxyx/

于 2012-11-30T23:58:05.713 に答える
1

これは、 svg要素で機能しないjqueryの追加の複製ですか？

SVGにはがないinnerHTMLため、.append機能しません。詳細については、リンクされた質問を参照してください。

編集：これは完全な真実ではないかもしれません。jQueryはrect、SVG名前空間にない要素を追加するようですが、追加する必要があります。

于 2012-11-30T23:33:41.607 に答える