使用svgdr动态绘制图案

马黑黑 · 发表于 2026-6-14 20:04

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

<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>

马黑黑 · 发表于 2026-6-14 20:13

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

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

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