Element.marker(x, y, width, height, refX, refY)
利用当前元素创建一个<marker>
元素。为了创建这个标记,你需要指定边界矩阵以及参考点。
SVG <marker>
元素被用来表示线或路径的开始、中间以及结束。例如,你可以使用一个圆或正方形标记作为路径的开始,然后一个三角标记作为路径的结束。
参数
x
数值。创建的标记元素的x位置。y
数值。创建的标记元素的y位置。width
数值。创建的标记元素的高度。height
数值。创建的标记元素的宽度。refX
数值。参考点的x位置。也就是内部的坐标。以后会作为路径的起止点等。 refY
数值。参考点的y位置。
<marker>
元素需要配合marker-start
, marker-end
, marker-mid
, 以及marker
属性使用。marker
属性可以替换路径上的所有点,marker-mid
可以替换处起止点以外的所有点。
返回值
元素。返回<marker>
元素。
使用
<svg id="svg" width="100" height="100"></svg>
var svg = Snap("#svg");
// 圈圈
var c1 = svg.paper.circle(5, 5, 3);
// 三角
var p1 = svg.paper.path("M2,2 L2,11 L10,6 L2,2").attr({
fill: "#f00"
});
// 变身标记
var m1 = c1.marker(0, 0, 8, 8, 5, 5), m2 = p1.marker(0, 0, 13, 13, 2, 6);
// 添加一个路径
var p2 = svg.paper.path("M10,10 L80,10 L80,60 L130,70").attr({
// 描边
stroke: "#00f",
strokeWidth: 1,
fill: "none",
// 起始标记
markerStart: m1,
// 结束标记
"marker-end": m2
});