javascript - SVG Marker does not work -


i created marker in javascript, looks 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 svg defs element 

and used path:

<path marker-mid="url(#mkrcircle)" d="m0,0l100,100" stroke-width="3"></path> 

but not appear in path @ all, why?
in advance

there 3 main things wrong:

(1) haven't specified stroke colour path, won't show (and neither markers)

(2) have specified "marker-mid" markers when path doesn't have midpoints. it's single line segment. try d="m0,0l100,100,200,200" instead.

(3) markerwidth , markerheight small (3x3) circle centred @ (6,6) , radius 5. try markerwidth="12" markerheight="12".

http://jsfiddle.net/fp5ey/


Comments

Popular posts from this blog

css - Which browser returns the correct result for getBoundingClientRect of an SVG element? -

gcc - Calling fftR4() in c from assembly -

.htaccess - Matching full URL in RewriteCond -