5

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>

しかし、パスにまったく表示されないのはなぜですか？
前もって感謝します

4

1 に答える 1

10

マーカーが機能しない原因は 3 つあります。

  1. パスのストロークの色を指定していないため、パスは表示されません (マーカーも表示されません)。

  2. marker-midパスに中間点がないときにマーカーを指定しました。それは単なる 1 つの線分です。d="M0,0L100,100,200,200"中間点を追加してみてください。

  3. 最後に、markerWidthとmarkerHeightは、(6,6) を中心とし、半径 5 の円には小さすぎます (3x3)。 を試してくださいmarkerWidth="12" markerHeight="12"。

http://jsfiddle.net/fP5EY/

于 2013-08-11T06:14:49.777 に答える