javascript - 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. 最后，对于以 (6,6) 为中心、半径为 5 的圆，您的 markerWidth 和 markerHeight 太小 (3x3)。尝试 markerWidth="12"markerHeight="12"。

http://jsfiddle.net/fP5EY/