在SVG中先绘制好一个图案，接着绘制相同样式的N多个图案并围绕一个点依次旋转一定角度，就可以构成一个漂亮的组合图案。这在 svgdr 中可以这么实现：
<svg id="msvg" width="400" height="400" viewBox="0 0 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 total = 6; // 绘制图案总数
var points = '200 200,160 65,200 10,240 65,200 200'; // 图案数据
// 绘制 total 个图案
Array.from({length: total}).forEach((_,k) => {
dr.polygon(points, 'none', 'teal', 3).transform(`rotate(${360 / total * k}, 200 200)`);
});
</script>
这是非常简洁的绘制方法。不过，svgdr 可以使用更加简洁的方式实现上述绘制效果：
<svg id="msvg" width="400" height="400" viewBox="0 0 400 400"></svg>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/svgdr/svgdr.mod.min.js';
var dr = Dr.dr(msvg);
// 绘制6个图案
dr.polygon('200 200,160 65,200 10,240 65,200 200', 'none', 'teal', 3).rotates(6,360,200,200);
</script>
rotates 是一个寄生指令，它需要上下文的支持，即 svgdr 刚刚绘制了一个图案，rotates 指令若紧接着使用，则会克隆 total - 1 个图案，连同原图案绕一圈均匀旋转。指令语法和参数说明如下：
// 语法：
rotates(total, angle, cx, cy);
// 参数：
total - 图案份数，必选参数。指令将克隆 total - 1 个上文所绘制的图案，合起来是 total 个图案；
angle - 角度值，缺省值 360，所有图案将在这个角度内均匀旋转布排；
cx - 旋转中心x坐标值；
cy - 旋转中心y坐标值；
// 用法举例：
dr.circle(100, 100, 10, 'tan'); // 绘制一个小圆
dr.rotates(24, 360, 200, 200); // 克隆23份相同的小圆并令其绕点（200,200）转一圈均匀分布
// 上述代码可以用链式写法写在一行：
// dr.circle(100, 100, 10, 'tan').rotates(24, 360, 200, 200);
rotates 指令名称的由来是这样：rotate一词意为旋转，指令加了个字母 s，表示多个图案的旋转状态。该指令意在简化旋转多个图像构图功能的实现流程，用得好可以事半功倍。
发表于 2025-9-17 13:09
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2025-9-17 15:53
发表于 2025-9-17 18:50
楼主
