//创建 id="pat" 的pattern标签，宽高各设为5%(将以此尺寸呈现在目标对象，行列各20个图案)
dr.pattern('pat', 0, 0, .05, .05);
//画个矩形充当图案，作为pattern的子元素
dr.polygon('10 0,20 10,10 20,0 10', 'plum').addTo('pat');
dr.circle(400, 200, 180, 'url(#pat)'); //用 fill 填充圆
	

//marker的宽高依据其内装饰物尺寸设定，以下两个marker，其内元素宽高占位均为20，故宽高=20*20
//refX 和 refY 是装饰物与目标线段衔接数据，取值建议是宽高的一半
dr1.marker('m1', 20, 20, 10, 10); //m1
dr1.circle(10, 10, 10,'red').addTo('m1'); //圆做加入m1做标记装饰物
dr1.marker('m2', 20, 20, 10, 10, 'auto'); //m2 : orient保证三角顺着路径方向转向
dr1.polygon('0 0, 0 20 20 10', 'red').addTo('m2'); //三角形加入m2做标记装饰物
//二次贝塞尔曲线线头和线尾加标记
dr1.path('M20 20 Q200 300,400 20', 'none', 'green').style('marker-start: url(#m1); marker-end: url(#m2');
//加 T 的二次贝塞尔曲线加头尾、中间标记
dr1.path('M20 320 Q100 180,200 320 T400 320', 'none', 'green').style('marker-start: url(#m1); marker-mid: url(#m2); marker-end: url(#m2');
//折线应用标记 : 标记会根据线宽缩放
var pts = '300 200,500 200,600 30,700 120,700 370,600 370,380 280',
	style = 'marker-start: url(#m1); marker-mid: url(#m1); marker-end: url(#m2);';
dr1.polyline(pts, 'none', 'green', 2).style(style);
	

<svg id="mysvg" width="400" height="400"></svg>

<script type="module">
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';

var dr = _dr('mysvg');

dr.pattern('p1', 0, 0, 0.1, 0.1);
dr.circle(20, 20, 10,'thistle').addTo('p1');
dr.marker('m1', 10, 10, 5, 5).addTo('defs');
dr.circle(5, 5, 2.5, 'red').addTo('m1');
 
var tt = 8, r = 180, rad = 360 / tt * Math.PI / 180, dstr = '';
 
Array(tt).fill('').forEach((_, key) => {
	var x = 200 + r * Math.cos(rad * key), y = 200 + r * Math.sin(rad * key);
	dstr += key === tt - 1 ? `${x} ${y}` : `${x} ${y},`;
});
dr.polygon(dstr, 'url(#p1)', 'fuchsia', 8).style('marker-mid: url(#m1); marker-end: url(#m1); stroke-dasharray: 8');
</script>