[grigandal]

На странице есть растянутое во всю ширину и высоту svg

<svg id="Arrows" width="100%" height="100%">
  <defs>
    <marker id="arrowhead" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z"></path>
    </marker>
  </defs>
</svg>

Хочу на нем нарисовать между элементами коннектор
Делаю это таким скриптом

var drawConnector = function(A, B) {
  var posnALeft = {
    x: A.offsetLeft - 8,
    y: A.offsetTop  + A.offsetHeight / 2
  };
  var posnARight = {
    x: A.offsetLeft + A.offsetWidth + 8,
    y: A.offsetTop  + A.offsetHeight / 2    
  };
  var posnBLeft = {
    x: B.offsetLeft - 8,
    y: B.offsetTop  + A.offsetHeight / 2
  };
  var posnBRight = {
    x: B.offsetLeft + B.offsetWidth + 8,
    y: B.offsetTop  + A.offsetHeight / 2
  };
  var dStr =
      "M" +
      (posnARight.x      ) + "," + (posnARight.y) + " " +
      "C" +
      (posnARight.x + 100) + "," + (posnARight.y) + " " +
      (posnBLeft.x - 100) + "," + (posnBLeft.y) + " " +
      (posnBLeft.x      ) + "," + (posnBLeft.y);
  var id = A.getAttribute('id') + "to" + B.getAttribute('id');
  if (!document.getElementById(id)){
    var path = document.createElement("path");
    path.setAttribute("id", id);
    path.setAttribute("fill","none");
    path.setAttribute("stroke","black");
    path.setAttribute("maker-end","url(#arrowhead)");
    path = document.getElementById("Arrows").appendChild(path);
  }
  document.getElementById(id).setAttribute("d", dStr);
   document.getElementById(id).innerHTML="ww";
};

Но добавленный path не отображается

Только когда в браузере удаляю его и вставляю через "Edit as HTML" он отображается, и то без стрелочки


Что я делаю не так и что надо делать, чтобы все отображалось?