马黑黑《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>