10x10行の.svg画像を交互に色付けされた画像で表示するInfographic

Question

テキストと2つの同じsvg画像のバリエーションを含む複数のdivを表示するinfographicを作成する必要があります（1つの画像は緑、 ）。

これらのsvg画像は小さな「人物」であり、両色の組み合わせを表示することが期待されています（ランダムに、行ごとの数に制限されているため、各行で同じ順序ではありません）グリッド。

現在、このメソッドはscroll（）イベントで呼び出されています。呼び出されたとき、私は100回ループし、個別に黒の1つのsvgイメージを表示しています。カウントがどこにあるかを示すためにタグに数値を追加します。これは理想的ではありませんが、それはこれまでの私のアプローチであり、仕事はしていますが、ゆっくりとしています。

私が本当にやりたかったのは、ページ全体が読み込まれるとすぐに、これらの混合色の人々の100人全員を表示して、緑色の人物の「散り」をグループ全体に加えることです。私はthis solutionを使用して、黒のsvgのCSSを緑に変えることができるかもしれませんが、私はこれを100 svgの表示全体にランダムに（？

私の考えの1つはおそらく、100の黒のsvgをdivのHTMLに追加/追加するメソッドを呼び出す/実行することでしたが、単一のオブジェクト/配列に保存しました。ページが準備完了したら、100 svgのオブジェクト/アレイ全体を一度に表示し、上記のリンクを使用して緑色の人をいくつか変更します。これはブレーンストーミングだけです。

それぞれが< 10人を表示するので、他のdivは大きな問題ではありません。

ありがとうございました！

Answer 1

私は乱数生成手法をとった。

1. コンテナのデータ属性に自分のSVGグループ全体に散りばめた色の数を保存しました。
2. 私はすべてのsvgsの数と共に、すべてのsvgsをキャプチャしました。
3. SVGのインデックスを取得しました乱数に総SVGの数を掛けてそのフロアを取って変更したいと思いました。
4. その後、「スプリンクル数」の制限に達するまで、ランダムインデックスを持つSVGにクラスを割り当て続けました。

(function() { 
 
    var $svgs = $('svg'), 
 
     numSvgs = $svgs.length, 
 
     howManySprinkles = parseInt($('[data-sprinkle]').attr('data-sprinkle')); 
 

 
    function getRndSvg(outOfHowMany) { 
 
    return Math.floor(Math.random() * outOfHowMany); 
 
    } 
 
    function sprinkleColor() { 
 
    console.log(getRndSvg(numSvgs)); 
 
    var $rndElem = $svgs.eq(getRndSvg(numSvgs)); 
 
    if ($rndElem.attr('class') !== "alt-color") { 
 
     $rndElem.attr('class', 'alt-color'); 
 
    } 
 
    } 
 
    while ($('.alt-color').length < howManySprinkles) { 
 
    sprinkleColor(); 
 
    } 
 
}());

div { 
 
    display: inline-block; 
 
} 
 
.alt-color circle { 
 
    fill: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 

 
<div data-sprinkle="3"> 
 
    <svg height="100" width="100"> 
 
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> 
 
    </svg> 
 
</div> 
 
<div> 
 
    <svg height="100" width="100"> 
 
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> 
 
    </svg> 
 
</div> 
 
<div> 
 
    <svg height="100" width="100"> 
 
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> 
 
    </svg> 
 
</div> 
 
<div> 
 
    <svg height="100" width="100"> 
 
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> 
 
    </svg> 
 
</div> 
 
<div> 
 
    <svg height="100" width="100"> 
 
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> 
 
    </svg> 
 
</div> 
 
<div> 
 
    <svg height="100" width="100"> 
 
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> 
 
    </svg> 
 
</div> 
 
<div> 
 
    <svg height="100" width="100"> 
 
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> 
 
    </svg> 
 
</div> 
 
<div> 
 
    <svg height="100" width="100"> 
 
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> 
 
    </svg> 
 
</div> 
 
<div> 
 
    <svg height="100" width="100"> 
 
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> 
 
    </svg> 
 
</div> 
 
<div> 
 
    <svg height="100" width="100"> 
 
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> 
 
    </svg> 
 
</div>