巨嘴鸟（sun指令演示）
<style>@import 'https://638183.freep.cn/638183/web/css/tz02.css';
#pa { --offsetX: 81px; --bg: tan url('https://638183.freep.cn/638183/t24/w6/toucan.webp') no-repeat center/cover; }
#progress { position: absolute; top: 10px; right: 10px; width: 15vw; height: 15vw; transition: .4s; }
#g1 { cursor: pointer; fill: skyblue; fill-rule: evenodd; stroke: lightblue; stroke-width: 3; animation: rotate 8s linear infinite var(--state); }
#g2 { cursor: pointer; fill: none; stroke: lightblue; stroke-width: 12; stroke-linecap: round; }
#prog { stroke: lightyellow; }
#btnFs { bottom: 20px; color: white; border-color: currentColor !important; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2027455660" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/04/06/21/646b0add8b43e.mp4" autoplay loop muted></video>
<svg id="progress" class="brightness" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<g id="g1"><title>ALT+X</title></g>
<g id="g2"><title>调节进度</title></g>
</svg>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
import Dr from 'https://638183.freep.cn/638183/svgdr/svgdr.mod.min.js';
var dr = Dr.dr(progress);
dr.polygon(dr.sun(11, 200, 190)).addTo(g1);
dr.circle(0, 0, 50, 'transparent', 'transparent').addTo(g1);
dr.circle(0, 0, 65).id('track').addTo(g2);
dr.circle(0, 0, 65).id('prog').addTo(g2);
FS(pa, g1);
</script> 帖子代码
<style>
@import 'https://638183.freep.cn/638183/web/css/tz02.css';
#pa { --offsetX: 0px; --bg: tan url('https://638183.freep.cn/638183/t24/w6/toucan.webp') no-repeat center/cover; }
#progress { position: absolute; top: 10px; right: 10px; width: 15vw; height: 15vw; transition: .4s; }
#g1 { cursor: pointer; fill: skyblue; fill-rule: evenodd; stroke: lightblue; stroke-width: 3; animation: rotate 8s linear infinite var(--state); }
#g2 { cursor: pointer; fill: none; stroke: lightblue; stroke-width: 12; stroke-linecap: round; }
#prog { stroke: lightyellow; }
#btnFs { bottom: 20px; color: white; border-color: currentColor !important; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2027455660" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/04/06/21/646b0add8b43e.mp4" autoplay loop muted></video>
<svg id="progress" class="brightness" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<g id="g1"><title>ALT+X</title></g>
<g id="g2"><title>调节进度</title></g>
</svg>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
import Dr from 'https://638183.freep.cn/638183/svgdr/svgdr.mod.min.js';
var dr = Dr.dr(progress);
dr.polygon(dr.sun(11, 200, 190)).addTo(g1);
dr.circle(0, 0, 50, 'transparent', 'transparent').addTo(g1);
dr.circle(0, 0, 65).id('track').addTo(g2);
dr.circle(0, 0, 65).id('prog').addTo(g2);
FS(pa, g1);
</script>
祝黑黑老师中秋快乐，阖家幸福！{:4_187:} 本帖最后由 马黑黑 于 2025-10-6 09:19 编辑
小播 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 的值用数组表示，写成 替代本例的 200 单值；
第三个参数是小 r，本质是设置绘制范围，具体是太阳花的尖角和圆心的距离。道理上太阳花是规整的，用正整数单值就好，但它也支持 这样的传参，这意味着绘制出来的太阳花整体外观是个椭圆形状的——当然也是太阳花，古时候这种类型的太阳花最受人们青睐。
太阳花是太阳给地球及其子民的赠物，让巨嘴鸟见证这一永恒的恩宠。
祝中秋快乐！
“太阳花是太阳给地球及其子民的赠物，让巨嘴鸟见证这一永恒的恩宠。”
黑黑为帖子取的寓意十分好，还用这样美好的寓意祝福大家中秋节，跟在后面一起祝福中秋快乐{:4_199:}{:4_176:} 这个太阳花的绘制真太方便了。黑黑还给了个小圆，提升点击交互友好性，真细心{:4_187:} 有一点没想明白，怎样才能知道里面那个圆的大小呢，比如circle(0, 0, 65)，65是算出来的么？ 太阳花是太阳给地球及其子民的赠物，让巨嘴鸟见证这一永恒的恩宠。
祝中秋快乐！
~~果然意蕴美好，创意新颖！
同祝大师阖家安康，扎西德勒！{:4_176:} 红影 发表于 2025-10-6 10:28
“太阳花是太阳给地球及其子民的赠物，让巨嘴鸟见证这一永恒的恩宠。”
黑黑为帖子取的寓意十分好，还用这 ...
{:4_191:} 红影 发表于 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
太阳花是太阳给地球及其子民的赠物，让巨嘴鸟见证这一永恒的恩宠。
祝中秋快乐！
节日好！
“大师”用词错误，俺只是一个探索者 漂亮！谢谢精彩示范，祝马老师中秋快乐{:4_191:} 杨帆 发表于 2025-10-6 12:44
漂亮！谢谢精彩示范，祝马老师中秋快乐
{:4_180:} 这个太阳花的进度条位置很好，{:4_199:} 精彩效果，学生已交作业，请老师指正{:4_190:} 小辣椒 发表于 2025-10-6 13:25
这个太阳花的进度条位置很好，
{:4_191:} 朵拉 发表于 2025-10-6 23:14
精彩效果，学生已交作业，请老师指正
{:4_199:} 马黑黑 发表于 2025-10-7 11:52
这首音乐确实不错，但为了加歌词我还是没有用纯音{:4_170:} 小辣椒 发表于 2025-10-7 20:01
这首音乐确实不错，但为了加歌词我还是没有用纯音
{:4_199:}
页:
[1]