svgdr path+rotaes 指令绘制多叶草

马黑黑

svgdr 有专门的绘制多叶草指令 clover，但绘制多叶草还有更多的实现方法。本帖展示使用 path + rotates 指令制作多叶草图案。

一、效果：

【附】svgdr 生成的代码：

二、核心svgdr代码：

dr.path('M0 -190 Q60 -160,0 0 T0 190 Q60 160,0 0 T0 -190', 'green', 'pink', 2).rotates(3, 180);

代码解析：SVG viewBox 设为 -200 -200 400 400

1. 使用 path 指令绘制第一条Q曲线+T延长曲线：Q曲线起点在画布正上方(0,-190)，终点在中心(0,0)，控制点在(60,-160)，然后T曲线将其延长至正下方(0,190)；第二条Q曲线+T延长曲线紧接着绘制，以上一条曲线的终点为起点，Q曲线终点仍是(0,0)，控制点Y坐标与上一条Q曲线反向(60,160)，T延长线终点 是上一条Q曲线的起点，形成闭合。
2. 给曲线上色，fill和stroke设置好合适的颜色，同时设置好 stroke-width 描边宽度。
3. 链式调用 rotates 指令复制已绘制好的曲线路径并进行旋转，共3条（含第一个路径），旋转角度范围是180度。

三、完整svgdr代码：

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

<script charset="utf-8" src="https://638183.freep.cn/638183/svgdr/svgdr.min.js"></script>
<script>
    var dr = _dr(msvg);
    dr.path('M0 -190 Q60 -160,0 0 T0 190 Q60 160,0 0 T0 -190', 'green', 'pink', 2).rotates(3, 180);
</script>

霜染枫丹

马老师上午好~~

这组代码特别试用，我试了，很灵活，能够达到很多种效果，赶紧抱走留存！
谢谢马老师分享！秋安！

小文

感恩先生此贴，学习。问好！

马黑黑

小文 发表于 2026-8-18 09:14
感恩先生此贴，学习。问好！

晚上好！

马黑黑

霜染枫丹 发表于 2026-8-18 08:09
马老师上午好~~

这组代码特别试用，我试了，很灵活，能够达到很多种效果，赶紧抱走留存！

这个东东，其实就是当年你辅导孩子做数学作业的知识

霜染枫丹

马黑黑 发表于 2026-8-18 19:52
这个东东，其实就是当年你辅导孩子做数学作业的知识

我辅导不了多少，就是看着做样子吓唬一下

我试了好几种样式，比我用ps简便多了，而且改变数据就OK,若制作天女散花的那些花，有了您这个办法，再把您那个乱转的轨道给嚯嚯的拆解一下，飘多远都顺畅！我觉的太好用了，用绘声绘影的路径，用FLASH的随便画都行，关键是标的物制作起来太好用了，就像您的那条丑鱼