酷毙了（rotates指令应用再举例）
本帖最后由 马黑黑 于 2025-9-27 12:34 编辑 <br /><br /><div class="codebox" data-prev="1"><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>
</div>
<p>线性渐变营造的效果：填充+描边使用相同的渐变，描边的作用是加厚边缘、令边缘转角处产生圆角。</p>
<p>图案设计简简单单，就是一个不规则、不封底（但会自动封底）的多边形，然后克隆 8-1=7 份并均匀绕圆心旋转，多边形共八份共同构成迷人的形状。</p>
<p>svgdr rotates 指令工作效率极高，是它使得旋转多个相同图案进行构图的工作变得相当简单。</p>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> <div class="codebox" data-title="svg代码" data-prev="1">
<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>
</div> 这两个都是 一样的。挺漂亮。讲外行话。{:4_173:} rotates指令威武！用极少的代码实现了复杂的视觉效果。为马老师点赞{:4_199:}
看了一下效果，太美了，真的是酷毙了。
这会在外头，等到电脑上在仔细看看代码学习学习{:4_199:} 红影 发表于 2025-9-27 14:56
看了一下效果，太美了，真的是酷毙了。
这会在外头，等到电脑上在仔细看看代码学习学习
{:4_190:} 梦江南 发表于 2025-9-27 14:50
这两个都是 一样的。挺漂亮。讲外行话。
一个是用 svgdr 绘制的，一个是 svgdr 生成的 svg 代码 杨帆 发表于 2025-9-27 14:53
rotates指令威武！用极少的代码实现了复杂的视觉效果。为马老师点赞
{:4_190:} 马黑黑 发表于 2025-9-27 18:37
这段时间在外头，要等回去了才能定下心来了{:4_173:} 红影 发表于 2025-9-27 23:49
这段时间在外头，要等回去了才能定下心来了
也可以吃个定心丸
页:
[1]