酷毙了（rotates指令应用再举例）

马黑黑

<svg id="msvg" width="600" height="600" viewBox="-200 -200 400 400"></svg> <script type="module"> import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.mod.js?v=1.0'; const dr = Dr.dr(msvg); dr.gradient('linearGradient', {id: 'grd',x1: 0, x2:0, y1: 0, y2: 0.75}, [['red',0],['darkred',0.5],['plum',1]]); dr.polygon('15 0,-50 150,50 130,15 0', 'url(#grd)', 'url(#grd)', 10).sets({'stroke-linejoin': 'round'}).rotates(8); </script>

线性渐变营造的效果：填充+描边使用相同的渐变，描边的作用是加厚边缘、令边缘转角处产生圆角。

图案设计简简单单，就是一个不规则、不封底（但会自动封底）的多边形，然后克隆 8-1=7 份并均匀绕圆心旋转，多边形共八份共同构成迷人的形状。

svgdr rotates 指令工作效率极高，是它使得旋转多个相同图案进行构图的工作变得相当简单。

马黑黑

<svg id="msvg" width="800" height="600" xmlns="http://www.w3.org/2000/svg" wdith="600" viewBox="-200 -200 400 400"> <defs id="defs"> <linearGradient id="grd" x1="0" x2="0" y1="0" y2="0.75"> <stop stop-color="red" offset="0"></stop> <stop stop-color="darkred" offset="0.5"></stop> <stop stop-color="plum" offset="1"></stop> </linearGradient> </defs> <polygon points="15 0,-50 150,50 130,15 0" fill="url(#grd)" stroke="url(#grd)" stroke-width="10" stroke-linejoin="round"></polygon> <polygon points="15 0,-50 150,50 130,15 0" fill="url(#grd)" stroke="url(#grd)" stroke-width="10" stroke-linejoin="round" transform="rotate(45.00, 0 0)"></polygon> <polygon points="15 0,-50 150,50 130,15 0" fill="url(#grd)" stroke="url(#grd)" stroke-width="10" stroke-linejoin="round" transform="rotate(90.00, 0 0)"></polygon> <polygon points="15 0,-50 150,50 130,15 0" fill="url(#grd)" stroke="url(#grd)" stroke-width="10" stroke-linejoin="round" transform="rotate(135.00, 0 0)"></polygon> <polygon points="15 0,-50 150,50 130,15 0" fill="url(#grd)" stroke="url(#grd)" stroke-width="10" stroke-linejoin="round" transform="rotate(180.00, 0 0)"></polygon> <polygon points="15 0,-50 150,50 130,15 0" fill="url(#grd)" stroke="url(#grd)" stroke-width="10" stroke-linejoin="round" transform="rotate(225.00, 0 0)"></polygon> <polygon points="15 0,-50 150,50 130,15 0" fill="url(#grd)" stroke="url(#grd)" stroke-width="10" stroke-linejoin="round" transform="rotate(270.00, 0 0)"></polygon> <polygon points="15 0,-50 150,50 130,15 0" fill="url(#grd)" stroke="url(#grd)" stroke-width="10" stroke-linejoin="round" transform="rotate(315.00, 0 0)"></polygon> </svg>

梦江南

这两个都是 一样的。挺漂亮。讲外行话。

杨帆

rotates指令威武！用极少的代码实现了复杂的视觉效果。为马老师点赞

红影

看了一下效果，太美了，真的是酷毙了。
这会在外头，等到电脑上在仔细看看代码学习学习

马黑黑

红影 发表于 2025-9-27 14:56
看了一下效果，太美了，真的是酷毙了。
这会在外头，等到电脑上在仔细看看代码学习学习

马黑黑

梦江南 发表于 2025-9-27 14:50
这两个都是 一样的。挺漂亮。讲外行话。

一个是用 svgdr 绘制的，一个是 svgdr 生成的 svg 代码

马黑黑

杨帆 发表于 2025-9-27 14:53
rotates指令威武！用极少的代码实现了复杂的视觉效果。为马老师点赞

红影

马黑黑 发表于 2025-9-27 18:37

这段时间在外头，要等回去了才能定下心来了

马黑黑

红影 发表于 2025-9-27 23:49
这段时间在外头，要等回去了才能定下心来了

也可以吃个定心丸