SVG标记不起作用 [英] SVG Marker does not work
问题描述
我在javascript中创建了一个标记,如下所示:
I created a marker in javascript, It looks like 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 is svg defs element
我用它作为路径:
<path marker-mid="url(#mkrCircle)" d="M0,0L100,100" stroke-width="3"></path>
但它根本没有出现在路径中,为什么?
谢谢提前
But it does not appear in the path at all, Why?
Thanks in advance
推荐答案
导致标记不起作用的原因有三个:
There are three reason causing marker to not work:
-
您没有为路径指定笔触颜色,因此它不会显示(标记也不会显示)。
You haven't specified a stroke colour for your path, so it won't show up (and neither will the markers).
当路径没有任何中点时,您已指定 marker-mid
标记。它只是一个单线段。尝试 d =M0,0L100,100,200,200
添加中间点。
You have specified marker-mid
markers when the path doesn't have any midpoints. It's just a single line segment. Try d="M0,0L100,100,200,200"
to add a mid point.
最后你的<对于以(6,6)和半径5为中心的圆圈,code> markerWidth 和 markerHeight
太小(3x3)。尝试 markerWidth =12markerHeight =12
。
Finally your markerWidth
and markerHeight
are too small (3x3) for the circle which is centred at (6,6) and radius 5. Try markerWidth="12" markerHeight="12"
.
这篇关于SVG标记不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!