在javascript中沿路径放置图像

对于带有声音的交互式地图，我曾经使用过以下解决方案，其中n个SVG圆圈用作按钮，在路径上的计算点处生成并放置在路径上（下面的脚本部分：

position = (length*stationsTimes[i])/wavesurfer.getDuration();
(...)
circlesArray[i].setAttributeNS(null, 'cx', path.getPointAtLength(position).x);
circlesArray[i].setAttributeNS(null, 'cy', path.getPointAtLength(position).y);

脚本：

function generateStations ()
  {
  let position;
  let circlesArray = [];

  for (let i=0; i<stationsTimes.length; i++)
  {
        // console.log(position[i].x);
        position = (length*stationsTimes[i])/wavesurfer.getDuration();
        let mainSvg = document.getElementById("mySVGMainElement" );
        circlesArray[i] = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        circlesArray[i].setAttributeNS(null, 'cx', path.getPointAtLength(position).x);
        circlesArray[i].setAttributeNS(null, 'cy', path.getPointAtLength(position).y);
        circlesArray[i].setAttributeNS(null, 'r', 7.596);
        circlesArray[i].setAttributeNS(null, 'style', 'fill: black; stroke-width: 0px;' );

        console.log(circlesArray[i]);
        mainSvg.appendChild(circlesArray[i]);
  }
  return circlesArray;
}

函数生成（）
{
让位；
设circlesArray=[]；
for（设i=0；i