SVG Marker does not work

问题:

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

回答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/

文章来源: SVG Marker does not work