巨嘴鸟（sun指令演示）

马黑黑

马黑黑

帖子代码

1. <style>
   
2.         @import 'https://638183.freep.cn/638183/web/css/tz02.css';
   
3.         #pa { --offsetX: 0px; --bg: tan url('https://638183.freep.cn/638183/t24/w6/toucan.webp') no-repeat center/cover; }
   
4.         #progress { position: absolute; top: 10px; right: 10px; width: 15vw; height: 15vw; transition: .4s; }
   
5.         #g1 { cursor: pointer; fill: skyblue; fill-rule: evenodd; stroke: lightblue; stroke-width: 3; animation: rotate 8s linear infinite var(--state); }
   
6.         #g2 { cursor: pointer; fill: none; stroke: lightblue; stroke-width: 12; stroke-linecap: round; }
   
7.         #prog { stroke: lightyellow; }
   
8.         #btnFs { bottom: 20px; color: white; border-color: currentColor !important; }
   
9. </style>
   
10. 
    
11. <div id="pa">
    
12.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2027455660" autoplay loop></audio>
    
13.         <video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/04/06/21/646b0add8b43e.mp4" autoplay loop muted></video>
    
14.         <svg id="progress" class="brightness" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
    
15.                 <g id="g1"><title>ALT+X</title></g>
    
16.                 <g id="g2"><title>调节进度</title></g>
    
17.         </svg>
    
18. </div>
    
19. 
    
20. <script type="module">
    
21.         import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
    
22.         import Dr from 'https://638183.freep.cn/638183/svgdr/svgdr.mod.min.js';
    
23. 
    
24.         var dr = Dr.dr(progress);
    
25. 
    
26.         dr.polygon(dr.sun(11, 200, 190)).addTo(g1);
    
27.         dr.circle(0, 0, 50, 'transparent', 'transparent').addTo(g1);
    
28.         dr.circle(0, 0, 65).id('track').addTo(g2);
    
29.         dr.circle(0, 0, 65).id('prog').addTo(g2);
    
30. 
    
31.         FS(pa, g1);
    
32. </script>

复制代码

梦江南

祝黑黑老师中秋快乐，阖家幸福！

马黑黑

小播 11 个顶点的太阳花使用 svgdr 的 sun() 指令绘制，代码在第 26 行。该行代码实际上是画一个多边形，polygon 标签需要一个点集合数据 points，dr.sun(11, 200, 190) 就是提供了这个 points 数据。绘制好的太阳花加入到 g1 分组，g1 设置了CSS层面的填充等样式，同时 g1 是小播集合，里面还有一个透明圆用作提升点击交互友好性，g1 分组通过 31 代码传参给 FS() 函数以获得小播应有的交互能力。

sun() 指令共需要一个必选参数、两个可选参数，当参数齐全，需要按顺序设置。

第一个参数设置太阳花花瓣数，本质上是顶点（尖角）数量，这个是必选参数，要求是 ≥ 3 的正整数，建议值 ≥ 7；

第二个参数是大 R，本质是设置太阳花的圆心位置，支持正整数单值、一对正整数数组。本例使用正整数单值，这等于说太阳花的圆心位置在 （200,200）这个地方，恰好是SVG viewBox视口的中心，原因是 viewBox 的 -200 和它刚好抵消；如果希望太阳花的圆心在（300,150）这个点，则 R 的值用数组表示，写成 [300,150] 替代本例的 200 单值；

第三个参数是小 r，本质是设置绘制范围，具体是太阳花的尖角和圆心的距离。道理上太阳花是规整的，用正整数单值就好，但它也支持 [180,120] 这样的传参，这意味着绘制出来的太阳花整体外观是个椭圆形状的——当然也是太阳花，古时候这种类型的太阳花最受人们青睐。

太阳花是太阳给地球及其子民的赠物，让巨嘴鸟见证这一永恒的恩宠。

祝中秋快乐！

红影

“太阳花是太阳给地球及其子民的赠物，让巨嘴鸟见证这一永恒的恩宠。”
黑黑为帖子取的寓意十分好，还用这样美好的寓意祝福大家中秋节，跟在后面一起祝福中秋快乐

红影

这个太阳花的绘制真太方便了。黑黑还给了个小圆，提升点击交互友好性，真细心

红影

有一点没想明白，怎样才能知道里面那个圆的大小呢，比如circle(0, 0, 65)，65是算出来的么？

樵歌

太阳花是太阳给地球及其子民的赠物，让巨嘴鸟见证这一永恒的恩宠。

祝中秋快乐！
~~果然意蕴美好，创意新颖！
同祝大师阖家安康，扎西德勒！

马黑黑

红影 发表于 2025-10-6 10:28
“太阳花是太阳给地球及其子民的赠物，让巨嘴鸟见证这一永恒的恩宠。”
黑黑为帖子取的寓意十分好，还用这 ...

马黑黑

红影 发表于 2025-10-6 10:30
这个太阳花的绘制真太方便了。黑黑还给了个小圆，提升点击交互友好性，真细心

透明圆的设计取决于小播图案的特征：填充色能连成整片区域的就无需加辅助对象，稀疏的就得加上。

马黑黑

红影 发表于 2025-10-6 10:33
有一点没想明白，怎样才能知道里面那个圆的大小呢，比如circle(0, 0, 65)，65是算出来的么？

辅助的透明色的圆可以覆盖整个小播，只要确保g2的层级在g1之上（后来者居上原则）。本例，透明圆的本意只是占领小播填充规则没有填充的里面区域，其半径的依据是进度显示、控制器，它们是同心圆、覆盖圆，半径是65，那么，透明圆的半径就不能大于65，依据g2里的圆的 stroke-width 确定透明圆的半径，这是简单的几何问题吧。

马黑黑

樵歌 发表于 2025-10-6 10:37
太阳花是太阳给地球及其子民的赠物，让巨嘴鸟见证这一永恒的恩宠。

祝中秋快乐！

节日好！

“大师”用词错误，俺只是一个探索者

杨帆

漂亮！谢谢精彩示范，祝马老师中秋快乐

马黑黑

杨帆 发表于 2025-10-6 12:44
漂亮！谢谢精彩示范，祝马老师中秋快乐

小辣椒

这个太阳花的进度条位置很好，

朵拉

精彩效果，学生已交作业，请老师指正

马黑黑

小辣椒 发表于 2025-10-6 13:25
这个太阳花的进度条位置很好，

马黑黑

朵拉 发表于 2025-10-6 23:14
精彩效果，学生已交作业，请老师指正

小辣椒

马黑黑 发表于 2025-10-7 11:52

这首音乐确实不错，但为了加歌词我还是没有用纯音

马黑黑

小辣椒 发表于 2025-10-7 20:01
这首音乐确实不错，但为了加歌词我还是没有用纯音