SVG Marker does not work

Question

I created a marker in javascript, It looks like below:

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

And I used it for a path:

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

But it does not appear in the path at all, Why?
Thanks in advance

Answer 1

There are three reason causing marker to not work:

1. You haven't specified a stroke colour for your path, so it won't show up (and neither will the markers).

2. You have specified marker-mid markers when the path doesn't have any midpoints. It's just a single line segment. Try d="M0,0L100,100,200,200" to add a mid point.

3. Finally your markerWidth and markerHeight are too small (3x3) for the circle which is centred at (6,6) and radius 5. Try markerWidth="12" markerHeight="12".

http://jsfiddle.net/fP5EY/