_{Snap.svg demo之}Element.marker()

Element.marker(x, y, width, height, refX, refY)

利用当前元素创建一个<marker>元素。为了创建这个标记，你需要指定边界矩阵以及参考点。

SVG <marker>元素被用来表示线或路径的开始、中间以及结束。例如，你可以使用一个圆或正方形标记作为路径的开始，然后一个三角标记作为路径的结束。

参数

• x 数值。创建的标记元素的x位置。
• y 数值。创建的标记元素的y位置。
• width 数值。创建的标记元素的高度。
• height 数值。创建的标记元素的宽度。
• refX 数值。参考点的x位置。也就是<marker>内部的坐标。以后会作为路径的起止点等。
• refY 数值。参考点的y位置。

<marker>元素需要配合marker-start, marker-end, marker-mid, 以及marker属性使用。marker属性可以替换路径上的所有点，marker-mid可以替换处起止点以外的所有点。

返回值

元素。返回<marker>元素。

使用

<svg id="svg" width="200" height="100"></svg>
            
<input id="button" type="button" value="点击改变圈圈的顺序">

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: "#000"      
});

// 变身标记
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 L150,10 L150,90").attr({
    // 描边
    stroke: "#00f",
    strokeWidth: 1,
    fill: "none",
    // 起始标记
    markerStart: m1,
    // 结束标记
    "marker-end": m2
});

效果

生成HTML