马黑黑《使用svgdr动态绘制图案》

醉美水芙蓉

<style>
	#msvg {
		display: block;
		margin: auto;
		border: 1px solid gray;
		polygon {
			stroke-dasharray: var(--len);
			stroke-dashoffset: var(--len);
			animation: draw 6s linear forwards;
		}
	}
	@keyframes draw { to { stroke-dashoffset: 0; } }
</style>

<svg id="msvg" width="600" height="600" viewBox="-200 -200 400 400"></svg>

<script type="module">
	import Dr from 'https://638183.freep.cn/638183/svgdr/svgdr.mod.min.js';
	var dr = Dr.dr(msvg);

	var points = dr.sun(35, 200, 190);
	dr.polygon(points, 'none', 'red', 1).set('fill-rule', 'evenodd');
	var len = dr.elm.getTotalLength();
	dr.elm.style.setProperty('--len', len);
	dr.elm.onanimationend = () => dr.elm.setAttribute('fill', 'pink');
</script>

醉美水芙蓉

一楼，绘制的是太阳花。步骤：

（一）获取太阳花点数据（代码 21 行）；
（二）绘制多边形图案（代码 22 行），使用的 points 是上一步的数据（sun方法）；
（三）获取图案描边总长度（代码 23 行）；
（四） 将上一步拿到的多边形描边总长度赋值给对应标签在CSS中所设置的变量 --len （代码 24 行）；
（五）监听多边形CSS动画执行完毕，给多边形填充颜色（代码 25 行）。

【注】svgdr 绘制图形时返回该图形对象，例如，22 行绘制一个多边形，它返回的就是多边形标签对象即 polygon，用 dr.elm 表示，基于 dr.elm 紧挨着的后续操作都指向它，直至绘制新的图像。

醉美水芙蓉

dr.sun 方法参数说明：

dr.sun(num, R, r);

num，花瓣数；
R: 太阳花从圆心到外部边界的半径（一般取值为长宽的一般，太阳花绘制在长宽一致的画布上）；
r: 太阳花绘制半径

klxf

演示漂亮~谢谢友友精彩分享