显示 10 x 10 行 .svg 图像的信息图，带有交替的彩色图像

Question

我需要创建一个信息图，显示多个 div，其中包含文本和同一 svg 图像的 2 个变体（一个图像是绿色的，一个是黑色的）。

这些 svg 图像是小“人”，预计会在 10 x 10 网格中显示两种颜色的分类（可能是随机的，每行限制为一个数字，因此每行中的顺序不一样） .

当前，该方法在 scroll() 事件上被调用。调用时，我循环 100 次并单独显示一个黑色 svg 图像，在其标签中添加一个数字以指示计数的位置。虽然这并不理想，但这是我迄今为止的方法并且正在奏效，但速度很慢。

我真正想做的是在页面加载/文档准备好时立即显示所有 100 个这些混合颜色的 svg 人，同时考虑到在整个组中添加绿色人 svg 的“喷洒”。我也许可以使用this solution 将黑色 svg 的 CSS 更改为绿色，但我绝对坚持如何在 100 个 svg 的显示中随机执行此操作（？）。

我的一个想法是可能调用/执行向 div 的 html 填充/添加 100 个黑色 svg 的方法，但将其保存到单个对象/数组中。页面准备好后，一次显示 100 个 svg 的整个对象/数组，然后使用上面的链接将一些人更改为绿色..这只是头脑风暴。

其他 div 不是什么大问题，因为每个 div 显示

提前感谢您的帮助！

Answer 1

我采用了随机数生成方法。

1. 我将我想要在整个 SVG 组中喷洒的颜色数量保存在容器的数据属性中。
2. 我捕获了所有 svg 以及 svg 的总数。
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>