使用JS的活动点具有多个SVG虚线

Question

我有一个问题，我正在尝试在具有活动标记的页面上绘制多个带有svg的交互线。但问题是活动标记不在虚线中心。这是我的代码：

[HttPost]
public ActionResult Submit(MyViewModel postData) {

    string textValue = null;
    DateTime? timeValue = null;

    if (postData.Type == "Text") {
        textValue = postData.TextData;
    }
    else {
        timeValue = postData.TimeData;
    }

    // ...
}

$("#mySVG").attr("width", $(document).width());
$("#mySVG").attr("height", $(document).height());
$(window).resize(function() {
  $("#mySVG").attr("width", $(document).width());
  $("#mySVG").attr("height", $(document).height());
  $("#mySVG").attr("viewBox", "768 863 " + $(document).width() + " " + $(document).height());
});

lineDraw("path1", "moving-dot");
lineDraw('path2', '');

function lineDraw(pathid, dotid) {
  var path = document.getElementById(pathid);
  var length = path.getTotalLength();
  //	var dote = document.getElementById(dotid);

  // The start position of the drawing
  path.style.strokeDasharray = length;

  // Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
  path.style.strokeDashoffset = length;

  window.addEventListener("scroll", function(e) {
    var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
    var scrollY = window.scrollY || window.pageYOffset;
    var maxScrollY = document.documentElement.scrollHeight - window.innerHeight;
    var draw = length * scrollpercent;

    // Reverse the drawing (when scrolling upwards)
    path.style.strokeDashoffset = length - draw;

    //get point at length
    endPoint = path.getPointAtLength(draw);
    var dist = length * scrollY / maxScrollY;
    var pos = path.getPointAtLength(dist);
    var x, y = 0;

    //console.log( '////////////////////////');
    //console.log( pos1);

    if (dist + 1 <= length) {
      var posAhead = path.getPointAtLength(dist + 1);

      var angle = Math.atan2(posAhead.y - pos.y, posAhead.x - pos.x);
      x = 37;
      y = 87;
    } else {
      var posBehind = path.getPointAtLength(dist - 1);
      var angle = Math.atan2(pos.y - posBehind.y, pos.x - posBehind.x);
      x = 87;
      y = 37;
    }
    
    // Position the car at "pos" totated by "angle"
    var car = document.getElementById("lineactive");
    var car2 = document.getElementById("lineactive2");
    var car3 = document.getElementById("lineactive3");
    var car4 = document.getElementById("lineactive4");
    car.setAttribute("transform", "translate(" + (parseInt(pos.x) - 1) + "," + (parseInt(pos.y) - 1) + ") rotate(" + rad2deg(angle) + ")");
    car2.setAttribute("transform", "translate(" + (parseInt(pos.x) + x) + "," + (parseInt(pos.y) + y) + ") rotate(" + rad2deg(angle) + ")");
    car3.setAttribute("transform", "translate(" + pos.x + "," + pos.y + ") rotate(" + rad2deg(angle) + ")");
    car4.setAttribute("transform", "translate(" + pos.x + "," + pos.y + ") rotate(" + rad2deg(angle) + ")");
  });
}

function rad2deg(rad) {
  return (180 * rad / Math.PI) - 90;
}