Javascript 使用JS在SVG中循环

所以我制作了一个小的星型SVG，我试图用这个星型SVG，而不是设计一个跨距，使一堆气泡浮到我的div顶部。我很难想出如何让我的Javascript循环使用SVG，而不是跨距来生成气泡

"use strict";

// variables
var numBubbles = 60;
var minSize = 10;
var maxSize = 20;
var container = document.getElementById("container");

// get the size of a bubble
// Randomized between minSize and maxSize
function bubbleSize() {
  return Math.floor(Math.random() * (maxSize - minSize + 1)) + minSize;
}

// Get the location of a bubble.
// Between left=2% and left=98%.
function bubbleLocation() {
  return Math.floor(Math.random() * 96) + 2;
}

// Create a bubble using the
// previous two functions.
function createBubble() {
  var size = bubbleSize();
  var location = bubbleLocation();

  // create span
  var el = document.createElement("span");

  // style span
  el.setAttribute("style", "width: " + size + "px; height: " + size + "px; left: " + location + "%; box-shadow: " + "0px 0px 12px 2px #ff4e85;");

  // append span
  container.appendChild(el);

}

// Start adding bubbles.
(function startBubbles() {
  var i = 0;

  function addBubble() {
    if (i < numBubbles) {
      createBubble();
      i++;
    } else {
      clearInterval(inter);
    }
  }

  // Add a bubble every 500ms.
  // But we don't want too many bubbles...

  var inter = setInterval(addBubble, 300);

})();

“严格使用”；
//变数
var Numbubles=60；
var minSize=10；
var maxSize=20；
var container=document.getElementById（“容器”）；
//得到一个气泡的大小
//在minSize和maxSize之间随机
函数bubbleSize（）{
返回Math.floor（Math.random（）*（maxSize-minSize+1））+minSize；
}
//获取气泡的位置。
//在左=2%和左=98%之间。
函数bubbleLocation（）{
返回Math.floor（Math.random（）*96）+2；
}
//使用
//前两个功能。
函数createBubble（）{
var size=bubbleSize（）；
var location=bubbleLocation（）；
//创建跨度
var el=document.createElement（“span”）；
//风格跨度
el.setAttribute（“样式”，“宽度：“+size+”px；高度：“+size+”px；左侧：“+location+”%；方框阴影：“+”0px 0px 12px 2px#ff4e85；”；
//附加跨度
子容器（el）；
}
//开始添加气泡。
（函数startBubbles（）{
var i=0；
函数addBubble（）{
如果（i

---

您可以使用

createBubble（）

克隆大量SVG

var el = svg.cloneNode(true);

..或者您可以继续使用

s，并在CSS中将SVG设置为

背景图像

：

span {
    background-image: url("/path/to/star.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    ...

无论哪种方式，如果您想要在星星上放置阴影，您都需要使用SVG文件中的

来实现这一点

更新笔：

---

使用克隆的SVG。将

cloneSVGs

更改为

false

以在背景图像中使用跨距。

Wow！谢谢你对斯芬XXX的帮助。我真的很感激。