SVG.js Marker标记和自定义标签

一、SVG.Marker 添加标记

SVG.Marker 标记可以被添加到一个线，折线的各点，多边形和路径。有三种类型的标记：开始，中间和结束。如果开始表示第一个点，则结束中间的最后一点和中间点。

var draw = SVG(‘svg1‘).size(300, 300);
var line = draw.line(0, 0, 200, 150);
line.stroke(‘blue‘).move(20, 20);
//创建marker,声明时指定宽度和高度，在标记处添加的形状超出部分会隐藏
var marker1 = draw.marker(10, 10, function (add) {
    add.rect(20, 20);
});
//添加到直线
line.marker(‘start‘, marker1);
//获取引用
var ref1 = line.reference(‘marker-start‘);
console.info(ref1);
//修改标记的大小，size()/width()/height()
ref1.size(20, 20);
//更改标记内容
marker1.update(function (add) {
    add.circle(10).fill(‘#f09‘);
});

2.实例

var draw = SVG(‘svg1‘).size(300, 300);
//SVG.Marker 标记可以被添加到一个线，折线的各点，多边形和路径。有三种类型的标记：开始，中间和结束。如果开始表示第一个点，则结束中间的最后一点和中间点。
var path = draw.path(‘M0 0 A50 50 0 0 1 50 50 A50 50 0 0 0 100 100‘);
path.fill(‘none‘).move(20, 20).stroke({ width: 1, color: ‘#ccc‘ });
path.marker(‘start‘, 10, 10, function (add) {
    add.circle(10).fill(‘#f06‘);
});
path.marker(‘mid‘, 10, 10, function (add) {
    add.rect(5, 10).cx(5).fill(‘#ccc‘);
});
path.marker(‘end‘,20,20,function(add){
    add.circle(6).center(4,5);
    add.circle(6).center(4,15);
    add.circle(6).center(12,10);
    this.fill(‘#0f9‘);
})

二、SVG.Bare 添加自定义标签

//SVG.Bare 添加自定义标签,不会在页面中显示
//element() 创建标签
//var element=draw.element(‘title‘);
var element = draw.element(‘symbol‘, SVG.Parent);// <symbol id="SvgjsSymbol1008">测试标签</symbol>
//words() 设置标签内容
element.words(‘测试标签‘);// <title id="SvgjsTitle1008">测试标签</title>

更多：

SVG.js Mask覆盖和ClipPath裁剪

SVG.js 图案使用和use引用

SVG.js 颜色渐变使用