使用svgdr动态绘制图案 转自马黑教程专版

admin

admin

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

admin

一楼，绘制的是太阳花。步骤： （一）获取太阳花点数据（代码 21 行）； （二）绘制多边形图案（代码 22 行），使用的 points 是上一步的数据（sun方法）； （三）获取图案描边总长度（代码 23 行）； （四） 将上一步拿到的多边形描边总长度赋值给对应标签在CSS中所设置的变量 --len （代码 24 行）； （五）监听多边形CSS动画执行完毕，给多边形填充颜色（代码 25 行）。 【注】svgdr 绘制图形时返回该图形对象，例如，22 行绘制一个多边形，它返回的就是多边形标签对象即 polygon，用 dr.elm 表示，基于 dr.elm 紧挨着的后续操作都指向它，直至绘制新的图像。

admin

dr.sun 方法参数说明：

dr.sun(num, R, r);

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