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
});