svgdr克隆旋转元素指令：rotates
<style>.artBox { font-size: 18px; }
.artBox > p { margin: 10px 0; line-height: 30px; }
.artBox mark { padding: 4px 6px; background: lightblue; }
.artBox h5 { font-size: 18px; margin: 6px 0; }
</style>
<div id="prevBox"></div>
<div class="artBox">
<p>在SVG中先绘制好一个图案，接着绘制相同样式的N多个图案并围绕一个点依次旋转一定角度，就可以构成一个漂亮的组合图案。这在 svgdr 中可以这么实现：</p>
<div class="codebox" data-prev="1">
<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; <txt-green>// 绘制图案总数</txt-green>
var points = '200 200,160 65,200 10,240 65,200 200'; <txt-green>// 图案数据</txt-green>
<txt-green>// 绘制 total 个图案</txt-green>
Array.from({length: total}).forEach((_,k) => {
dr.polygon(points, 'none', 'teal', 3).transform(`rotate(${360 / total * k}, 200 200)`);
});
</script>
</div>
<p>这是非常简洁的绘制方法。不过，svgdr 可以使用更加简洁的方式实现上述绘制效果：</p>
<div class="codebox" data-prev="1">
<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);
<txt-green>// 绘制6个图案</txt-green>
dr.polygon('200 200,160 65,200 10,240 65,200 200', 'none', 'teal', 3).rotates(6,360,200,200);
</script>
</div>
<p>rotates 是一个寄生指令，它需要上下文的支持，即 svgdr 刚刚绘制了一个图案，rotates 指令若紧接着使用，则会克隆 total - 1 个图案，连同原图案绕一圈均匀旋转。指令语法和参数说明如下：</p>
<div class="codebox">
<txt-green>// 语法：</txt-green>
rotates(total, angle, cx, cy);
<txt-green>// 参数：</txt-green>
<txt-green>total - 图案份数，必选参数。指令将克隆 total - 1 个上文所绘制的图案，合起来是 total 个图案；</txt-green>
<txt-green>angle - 角度值，缺省值 360，所有图案将在这个角度内均匀旋转布排；</txt-green>
<txt-green>cx - 旋转中心x坐标值；</txt-green>
<txt-green>cy - 旋转中心y坐标值；</txt-green>
<txt-green>// 用法举例：</txt-green>
dr.circle(100, 100, 10, 'tan'); <txt-green>// 绘制一个小圆</txt-green>
dr.rotates(24, 360, 200, 200); <txt-green>// 克隆23份相同的小圆并令其绕点（200,200）转一圈均匀分布</txt-green>
<txt-green>// 上述代码可以用链式写法写在一行：</txt-green>
<txt-green>// dr.circle(100, 100, 10, 'tan').rotates(24, 360, 200, 200);</txt-green>
</div>
<p>rotates 指令名称的由来是这样：rotate一词意为旋转，指令加了个字母 s，表示多个图案的旋转状态。该指令意在简化旋转多个图像构图功能的实现流程，用得好可以事半功倍。</p>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 代码简洁，能量强大，美观便捷，巧夺天工，为马老师点赞{:4_191:} 头两个绘制方法不同，效果是一猫一样。。。。
这样放在一起对比更方便了。。
rotates 指令功能也强大，主要是理解起来更简便，小白更喜欢这种{:4_170:} 花飞飞 发表于 2025-9-17 18:50
头两个绘制方法不同，效果是一猫一样。。。。
这样放在一起对比更方便了。。
rotates 指令功能也强大，主 ...
加入少量几个会经常用到的功能性指令还是有必要的，但得慎重，太多指令会令模块的使用难度增加。 杨帆 发表于 2025-9-17 15:53
代码简洁，能量强大，美观便捷，巧夺天工，为马老师点赞
{:4_190:} 克隆n-1个前面绘制的图案，并能用链式写法写在一行，这个功能真好{:4_187:} 这个是在设定的角度里旋转均匀布局的，碰上这样的情形，都可以用这个指令实现{:4_204:} 红影 发表于 2025-9-17 22:20
这个是在设定的角度里旋转均匀布局的，碰上这样的情形，都可以用这个指令实现
和HTML元素以自己的中心点为旋转中心不同，所有的svg元素旋转，默认的旋转中心点都是svg的坐标点 （0，0）即左上角，需要使用者自行设置才能达到自己的预设目标。 红影 发表于 2025-9-17 22:17
克隆n-1个前面绘制的图案，并能用链式写法写在一行，这个功能真好
svg设计之初就是考虑链式，这是参照 JQuery 的经典做法。 马黑黑 发表于 2025-9-17 22:50
和HTML元素以自己的中心点为旋转中心不同，所有的svg元素旋转，默认的旋转中心点都是svg的坐标点 （0，0 ...
嗯嗯，一般需要设置时考虑，那个-200就是为了旋转中心而设的吧。 马黑黑 发表于 2025-9-17 22:52
svg设计之初就是考虑链式，这是参照 JQuery 的经典做法。
这个不知道呢，只能听黑黑的讲授才知道{:4_187:} 红影 发表于 2025-9-18 19:06
这个不知道呢，只能听黑黑的讲授才知道
我说的是 svgdr，说错了 红影 发表于 2025-9-18 19:05
嗯嗯，一般需要设置时考虑，那个-200就是为了旋转中心而设的吧。
这个你应该能理解，就是坐标系的转换 马黑黑 发表于 2025-9-17 19:39
加入少量几个会经常用到的功能性指令还是有必要的，但得慎重，太多指令会令模块的使用难度增加。
加入适量盐和糖还可以，就是适量指令真不会{:4_170:} 马黑黑 发表于 2025-9-18 19:53
我说的是 svgdr，说错了
知道你说的是这个，这个设计很让黑黑花费了不少心思呢{:4_187:} 马黑黑 发表于 2025-9-18 19:53
这个你应该能理解，就是坐标系的转换
是的，这个知道的{:4_204:} 红影 发表于 2025-9-18 22:04
是的，这个知道的
{:4_190:} 红影 发表于 2025-9-18 22:04
知道你说的是这个，这个设计很让黑黑花费了不少心思呢
没花多少心思，一开始就是这么想的 花飞飞 发表于 2025-9-18 21:21
加入适量盐和糖还可以，就是适量指令真不会
{:4_190:} 马黑黑 发表于 2025-9-18 22:15
将坐标系平移，让圆心居中。当然坐标系的平移加旋转就难了，尤其不是在原点的旋转。