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
- 使用 path 指令绘制第一条Q曲线+T延长曲线：Q曲线起点在画布正上方(0,-190)，终点在中心(0,0)，控制点在(60,-160)，然后T曲线将其延长至正下方(0,190)；第二条Q曲线+T延长曲线紧接着绘制，以上一条曲线的终点为起点，Q曲线终点仍是(0,0)，控制点Y坐标与上一条Q曲线反向(60,160)，T延长线终点 是上一条Q曲线的起点，形成闭合。
- 给曲线上色，fill和stroke设置好合适的颜色，同时设置好 stroke-width 描边宽度。
- 链式调用 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>
| 
发表于