请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
绘制多叶草的路径有很多方法，svgdr 采用三次贝赛尔曲线实现，具体是从规定的中心点出发又回到原点，所有曲线依次均无缝衔接构成最终路径并返回给调用者。试看采用默认方式的绘制代码和效果——
<svg id="mysvg" width="400" height="400"></svg>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/svgdr/svgdr.mod.min.js';
const dr = Dr.dr('mysvg');
const d = dr.clover(); // 获取三叶草路径
dr.path(d, 'green'); // 绘制三叶草
</script>
这里，clover 指令以默认配置的方式拿到的是三叶草的路径。可以绘制四叶草、五叶草、N叶草，要做的事情是给 clover 指令设定一个配置对象，例如——
<svg id="mysvg" width="400" height="400"></svg>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/svgdr/svgdr.mod.min.js';
const dr = Dr.dr('mysvg');
const setting = {num: 4, R: 200, r: 280, gap: 1.25};
const d = dr.clover(setting); // 获取多叶草路径
dr.path(d, 'green'); // 绘制多叶草
</script>
代码中的变量 setting 存储了自定义多叶草路径的配置，花括号 {} 里各个参数可以不按顺序设置，也可以不用全部设置。各键值对参数的含义如下：
① num，多叶草叶片数，要求大于等于 3 的正整数，缺省默认是 3；
② R，水平方向多叶草圆心X坐标值，例如希望多叶草画在svg水平方向的中心，则为svg宽度的一半；
③ r，多叶草在外切圆控制点1的半径，控制点2依据第下一个参数 gap 确定，多叶草的顶点则根据控制点决定其位置，r 的缺省值为 R+60；
④ gap，两个控制点的间隔系数，浮点数值，默认值是 2.0，支持正、负数。
clover 指令不考虑纵向方向的圆心位置，因此要绘制多个多叶草，可以使用相同的 R 值，然后平移到指定的位置，例如下例绘制不同样式的多叶草，其中有一个往右腾挪——
<svg id="mysvg" width="800" height="400"></svg>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/svgdr/svgdr.mod.min.js';
const dr = Dr.dr('mysvg');
const d1 = dr.clover({num: 5, R: 200, r: 240, gap: 0.75}); // 路径1
const d2 = dr.clover({num: 6, R: 200, r: 240, gap: 1.2}); // 路径2
dr.path(d1, 'green'); // 绘制第一个多叶草
dr.path(d2, 'teal').transform('translate(400)'); // 绘制第二个多叶草
</script>
或者使用其它任意可行的方式安排多叶草的位置，其中最常见的方法是将路径或图形放入分组然后用 use 标签将其实例化—— use 标签可以灵活设置位置。
需要注意的是，clover 的计算将SVG的 viewBox 属性值考虑在内，配置和使用 clover 指令应顾及 viewBox 因素。
| 
发表于 2025-10-4 18:07
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主