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>
しかし、それはパスにまったく表示されません、なぜですか？
前もって感謝します
マーカーが機能しない原因は3つあります。
パスにストロークの色を指定していないため、表示されません（マーカーも表示されません）。
marker-midパスに中点がない場合にマーカーを指定しました。それはただの単一の線分です。d="M0,0L100,100,200,200"中点を追加してみてください。
最後に、markerWidthとmarkerHeightは（6,6）と半径5を中心とする円に対して小さすぎます（3x3）。を試してくださいmarkerWidth="12" markerHeight="12"。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加