Javascript 向svg中的随机元素添加和删除类

我正在为客户建立一个自定义网站。 我有一个自定义svg，里面有20条多段线！ 我想要实现的是使用自定义JavaScript每隔几秒钟随机向每个类添加和删除一个类

我制作了css，并将类“anim”添加到其中一个类中，这样我就可以看到我的css工作了。以下是我到目前为止从CSS开始的内容

.honeycomb {
  position:absolute;
  top:0;
  left:0;
  overflow:hidden;
  width:28%;
  height:auto;
  z-index:50;
  float:left
}
.honeycomb img {display:none}
.honeycomb svg {width:100%;height:auto;float:left;margin:auto}
.honeycomb .group {opacity:.1}
.honeycomb--op07 .group {opacity:.7}
.honeycomb .strokes polyline {
  fill-opacity:0;
  stroke:#26BFD0;
  stroke-width:0;
  opacity:1;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden
}
.honeycomb .strokes polyline.anim {
  stroke-width:1;
  -webkit-animation:draw 4s linear;
  -o-animation:draw 4s linear;
  animation:draw 4s linear;
  stroke-dasharray:500;
  stroke-dashoffset:500;
  -webkit-animation-fill-mode:both;
  -o-animation-fill-mode:both;
  animation-fill-mode:both;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden
}
@-webkit-keyframes draw {
  0%{
    stroke-dashoffset:-250
  }
  90% {
    stroke-dashoffset:250
  }
  100% {
    stroke-dashoffset:250;
    stroke:transparent
  }
}
@-o-keyframes draw {
  0%{
    stroke-dashoffset:-250
  }
  90% {
    stroke-dashoffset:250
  }
  100% {
    stroke-dashoffset:250;
    stroke:transparent
  }
}
@keyframes draw {
  0%{
    stroke-dashoffset:-250
  }
  90% {
    stroke-dashoffset:250
  }
  100% {
    stroke-dashoffset:250;
    stroke:transparent
  }
}
.honeycomb--color .strokes polyline {stroke:#26BFD0}

<div id="honeycomb" class="honeycomb honeycomb--color">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="479.779px" height="728.499px" viewBox="78.708 208.991 479.779 728.499"
             enable-background="new 78.708 208.991 479.779 728.499" xml:space="preserve">
<g class="strokes">
            <polyline class="anim" fill="none" stroke="#26BFD0" stroke-width="0.8079" points="353.708,634.052 374.14,669.439 353.708,704.827 
              374.14,740.217 415.001,740.217 435.434,775.604    "/>
            <polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="292.414,457.11 251.551,457.11 231.12,492.5 190.257,492.5 
              169.827,527.889 190.257,563.278   "/>
            <polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="250.066,597.181 231.12,634.055 251.551,669.44 
              231.12,704.83 190.257,704.83  "/>
            <polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="231.125,350.941 190.262,350.941 169.831,386.331 
              190.262,421.721 169.831,457.107   "/>
            <polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="374.14,457.113 353.708,492.496 374.14,527.886 
              353.708,563.275 312.845,563.277   "/>
            <polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="263.06,335.479 283.489,370.867 324.349,370.873 
              344.781,406.263 324.349,441.65    "/>
            <polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="415.001,669.439 435.434,704.827 476.294,704.827 
              496.727,740.217 476.294,775.604   "/>
            <polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="222.192,760.144 263.055,760.144 285.072,793.944 
              324.349,795.531 344.781,830.918   "/>
            <polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="292.418,244.777 312.845,280.17 353.708,280.17 
              374.14,315.561 353.708,350.948    "/>
            <polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="201.762,583.204 160.899,583.204 140.468,618.594 
              160.899,653.979 140.468,689.366 160.899,724.758   "/>
            <polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="283.486,653.977 263.055,689.366 283.486,724.756 
              324.349,724.754 344.781,760.143   "/>
            <polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="374.14,527.886 415.001,527.886 435.434,563.275 
              415.001,598.663 435.434,634.052 476.294,634.052   "/>
            <polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="353.708,775.604 374.14,810.992 415.001,810.992 
              435.434,846.382 415.001,881.77 435.434,917.158    "/>
            <polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="222.192,547.816 263.055,547.814 283.486,583.201 
              324.349,583.201 344.781,618.591 324.349,653.977   "/>
            <polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="251.556,315.552 292.418,315.552 312.845,350.948 
              292.418,386.328 251.556,386.328 231.125,421.721   "/>
            <polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="99.605,406.265 79.174,441.652 99.61,477.034 
              140.473,477.034 160.899,512.428 140.468,547.816   "/>
            <polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="222.197,406.257 201.762,441.65 222.192,477.039 
              263.055,477.039 283.486,512.425 324.349,512.428   "/>
            <polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="435.434,492.496 476.294,492.496 496.727,527.886 
              476.294,563.275 496.727,598.663 537.588,598.665   "/>
            <polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="558.021,775.604 537.588,810.992 496.727,810.992 
              476.294,846.382 496.727,881.77 476.294,917.158    "/>
            <polyline fill="none" stroke="#26BFD0" stroke-width="0.8079" points="446.936,583.201 406.073,583.201 385.643,618.591 
              406.073,653.977 385.643,689.366 406.073,724.754   "/>
        </g>
    </svg>
</div>

。蜂巢{
位置：绝对位置；
排名：0；
左：0；
溢出：隐藏；
宽度：28%；
高度：自动；
z指数：50；
浮动：左
}
.img{显示：无}
.svg{宽度：100%；高度：自动；浮动：左侧；边距：自动}
.honeycomb.group{opacity:.1}
.honeycomb--op07.group{opacity:.7}
.蜂窝.多段线{
填充不透明度：0；
行程：#26BFD0；
笔画宽度：0；
不透明度：1；
-webkit背面可见性：隐藏；
背面可见性：隐藏
}
.Honeycom.strokes多段线.anim{
笔画宽度：1；
-webkit动画：画4s线性；
-o-动画：绘制4s线性；
动画：画4s直线；
行程：500；
行程偏移：500；
-webkit动画填充模式：两者都有；
-o-动画-填充模式：均为；
动画填充模式：两者都有；
-webkit背面可见性：隐藏；
背面可见性：隐藏
}
@-webkit关键帧绘制{
0%{
行程偏移：-250
}
90% {
行程偏移：250
}
100% {
行程偏移：250；
笔划：透明
}
}
@-o关键帧绘制{
0%{
行程偏移：-250
}
90% {
行程偏移：250
}
100% {
行程偏移：250；
笔划：透明
}
}
@关键帧绘制{
0%{
行程偏移：-250
}
90% {
行程偏移：250
}
100% {
行程偏移：250；
笔划：透明
}
}
.Honeycom--颜色.strokes多段线{stroke:#26BFD0}

那么，有没有任何教程我可以用来实现这一点呢

非常感谢

---

Phillip

假设您已经在正在构建的网站上使用jQuery，您可以这样做：（动画加速）

函数随机多段线（）{
var countPolylines=$（“#多段线”）。长度，
randomPolyline=Math.floor（Math.random（）*CountPolyline）+1；
$（“#蜂窝svg多段线”）.removeClass（“anim”）；
$（“#svg多段线：第n个子项（“+randomPolyline+”）.addClass（“动画”）；
}
$（函数（）{
设置间隔（随机多段线，1000）；
});
。蜂巢{
位置：绝对位置；
排名：0；
左：0；
溢出：隐藏；
宽度：28%；
高度：自动；
z指数：50；
浮动：左
}
.蜂窝式img{
显示：无
}
.蜂窝状svg{
宽度：100%；
高度：自动；
浮动：左；
保证金：自动
}
.蜂巢集团{
不透明度：.1
}
.蜂巢——op07.组{
不透明度：.7
}
.蜂窝.多段线{
填充不透明度：0；
行程：#26BFD0；
笔画宽度：0；
不透明度：1；
-webkit背面可见性：隐藏；
背面可见性：隐藏
}
.Honeycom.strokes多段线.anim{
笔画宽度：1；
-webkit动画：绘制1s线性；
-o-动画：绘制1s线性；
动画：画1s线性；
行程：500；
行程偏移：500；
-webkit动画填充模式：两者都有；
-o-动画-填充模式：均为；
动画填充模式：两者都有；
-webkit背面可见性：隐藏；
背面可见性：隐藏
}
@-webkit关键帧绘制{
0% {
行程偏移：-250
}
90% {
行程偏移：250
}
100% {
行程偏移：250；
笔划：透明
}
}
@-o关键帧绘制{
0% {
行程偏移：-250
}
90% {
行程偏移：250
}
100% {
行程偏移：250；
笔划：透明
}
}
@关键帧绘制{
0% {
行程偏移：-250
}
90% {
行程偏移：250
}
100% {
行程偏移：250；
笔划：透明
}
}
.蜂窝状--颜色.笔划多段线{
行程：#26BFD0
}

编写javascript时遇到了哪些问题？你没有告诉我们如何帮助你。询问教程在这里是离题的。太好了，这正是我想要的！非常感谢！