SVG Маркер не работает

Question

Я создал маркер в JavaScript, это выглядит, как показано ниже:

var marker = document.createElementNS(SVG.ns, "marker"); 
marker.setAttribute("markerWidth", "3"); 
marker.setAttribute("markerHeight", "3"); 
marker.setAttribute("id", "mkrCircle"); 
marker.setAttribute("viewBox", "0 0 12 12"); 
marker.setAttribute("orient", "auto"); 
marker.setAttribute("stroke", "#000000"); 
marker.setAttribute("stroke-width", "2"); 
marker.setAttribute("fill", "#ffffff"); 
marker.setAttribute("refX", "12"); 
marker.setAttribute("refY", "6"); 

var mkrContent = document.createElementNS(SVG.ns, "circle"); 
mkrContent.setAttribute("r", "5"); 
mkrContent.setAttribute("cx", "6"); 
mkrContent.setAttribute("cy", "6"); 

marker.appendChild(mkrContent); 
defs.appendChild(marker); // <-- defs is svg defs element 

И я использовал его для пути:

<path marker-mid="url(#mkrCircle)" d="M0,0L100,100" stroke-width="3"></path> 

Но он не появляется в пути вообще, почему?
Заранее спасибо

Answer 1

Там находятся три причины чего маркер не работает:

1. Вы не указали цвет обводки для вашего пути, поэтому он не будет отображаться (и ни выйдет маркеры).

2. Вы указали маркеры marker-mid, когда путь не имеет промежуточных точек. Это всего лишь один сегмент. Попробуйте d="M0,0L100,100,200,200", чтобы добавить среднюю точку.

3. Наконец ваш markerWidth и markerHeight слишком малы (3x3) для окружности, с центром в точке (6,6) и радиусом 5. Попробовать markerWidth="12" markerHeight="12".

http://jsfiddle.net/fP5EY/