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"
.
Comments
Post a Comment