如何在相应的滚动条上获得虚线svg动画？

<style>
  /* 设置滚动条样式 */
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    background-color: #f1f1f1;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #888;
  }
</style>

<script>
  // 创建SVG元素
  var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("width", "10px");
  svg.setAttribute("height", "100%");

  // 定义SVG动画
  var line = document.createElementNS("http://www.w3.org/2000/svg", "line");
  line.setAttribute("x1", "0");
  line.setAttribute("y1", "0");
  line.setAttribute("x2", "0");
  line.setAttribute("y2", "100%");
  line.setAttribute("stroke", "#000");
  line.setAttribute("stroke-width", "2");
  line.setAttribute("stroke-dasharray", "4");
  line.setAttribute("stroke-dashoffset", "0");

  // 创建动画效果
  var animate = document.createElementNS("http://www.w3.org/2000/svg", "animate");
  animate.setAttribute("attributeName", "stroke-dashoffset");
  animate.setAttribute("from", "0");
  animate.setAttribute("to", "100");
  animate.setAttribute("dur", "1s");
  animate.setAttribute("repeatCount", "indefinite");

  // 将动画应用到线条上
  line.appendChild(animate);

  // 将线条插入到SVG元素中
  svg.appendChild(line);

  // 将SVG元素插入到滚动条位置
  document.body.appendChild(svg);
</script>