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 顏色漸變使用