Svg добавить path

[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" он отображается, и то без стрелочки


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

[grigandal]

То есть, все отображается нормально, если меняю HTML вручную
А скриптом ничего не отображается, хотя в код добавляется

[рони]

Что я делаю не так

createElementNS
setAttributeNS

[grigandal]

рони,
То есть, если я правильно понял, нужно так?

ar path = document.getElementById(id);
  if (!path){
	path = document.createElementNS("http://www.w3.org/2000/svg","path");
	path.setAttributeNS("http://www.w3.org/2000/svg","id", id);
	path.setAttributeNS("http://www.w3.org/2000/svg","fill","none");
	path.setAttributeNS("http://www.w3.org/2000/svg","stroke","black");
	path.setAttributeNS("http://www.w3.org/2000/svg","stroke-width","2");
	path.setAttributeNS("http://www.w3.org/2000/svg","maker-end","url(#arrowhead)");
	document.getElementById("Arrows").appendChild(path);
  }
  console.log(document.getElementById(id));
  path.setAttributeNS("http://www.w3.org/2000/svg","d", dStr);

Но все равно не отображается...

[grigandal]

рони,
Работает без setAttributeNS

Но стрелочка все равно не отображается, только линия

[рони]

grigandal,
посмотрите документацию и сделайте минимальный макет целиком, если останутся вопросы.
https://developer.mozilla.org/en-US/...reateElementNS
https://developer.mozilla.org/en-US/...setAttributeNS
http://javascript.ru/forum/showthrea...265#post110834
https://javascript.ru/forum/misc/667...tml#post439880

[grigandal]

рони,
Вот так вроде работает

var path = document.getElementById(id);
  if (!path){
	path = document.createElementNS("http://www.w3.org/2000/svg","path");
	document.getElementById("Arrows").appendChild(path);
	path.setAttribute("id", id);
	path.setAttribute("fill","none");
	path.setAttribute("stroke","black");
	path.setAttribute("stroke-width","2");
	path.setAttribute("maker-end","url(#arrowhead)");
	
  }
  path.setAttribute("d", dStr);

Но не рисуются наконечники стрелочек
Что не так?

[рони]

Что не так?

[grigandal]

рони,
Только там path.setAttribute("maker-end","url(#arrowhead)");
а не path.setAttributeNS("maker-end","url(#arrowhead)");

Случайно вставил

[рони]

grigandal,
не знаю, что и как, вы хотите сделать.
могу только гадать, может нет элемента, может нет цвета или размера, может нарушен синтаксис.