待到山花漫烂时
<style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: beige url('https://638183.freep.cn/638183/t24/w6/ujhx.webp') no-repeat center/cover; }
#progress { position: absolute; width: 260px; height: 260px; right: 30px; bottom: 30px; }
#prog, #track { fill: none; stroke: pink; stroke-opacity: .6; stroke-width: 10; stroke-linejoin: round; stroke-linecap: round; transition: .15s; cursor: pointer; }
#prog { stroke: magenta; }
#player { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: lightgreen; fill-rule: evenodd; fill-opacity: .5; animation: rotate 8s linear infinite var(--state); }
#btnFs { right: 20px; top: 20px; color: lightgreen; border-color: currentColor!important; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2628812849" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/3664703/00/02/09/5b505b5860f94.mp4" autoplay loop muted></video>
<svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<path id="player" d="M400.00 200.00,L75.30 356.37,L155.50 5.01,L380.19 286.78,L19.81 286.78,L244.50 5.01,L324.70 356.37,L0.00 200.00,L324.70 43.63,L244.50 394.99,L19.81 113.22,L380.19 113.22,L155.50 394.99,L75.30 43.63"><title>Alt+X</title></path>
<circle id="track" cx="200" cy="200" r="80"><title>调节进度</title></circle>
<circle id="prog" cx="200" cy="200" r="80"><title>调节进度</title></circle>
</svg>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
FS(pa, player);
</script> <div class="codebox">
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: beige url('https://638183.freep.cn/638183/t24/w6/ujhx.webp') no-repeat center/cover; }
#progress { position: absolute; width: 260px; height: 260px; right: 30px; bottom: 30px; }
#prog, #track { fill: none; stroke: pink; stroke-opacity: .6; stroke-width: 10; stroke-linejoin: round; stroke-linecap: round; transition: .15s; cursor: pointer; }
#prog { stroke: magenta; }
#player { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: lightgreen; fill-rule: evenodd; fill-opacity: .5; animation: rotate 8s linear infinite var(--state); }
#btnFs { right: 20px; top: 20px; color: lightgreen; border-color: currentColor!important; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2628812849" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/3664703/00/02/09/5b505b5860f94.mp4" autoplay loop muted></video>
<svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<path id="player" d="M400.00 200.00,L75.30 356.37,L155.50 5.01,L380.19 286.78,L19.81 286.78,L244.50 5.01,L324.70 356.37,L0.00 200.00,L324.70 43.63,L244.50 394.99,L19.81 113.22,L380.19 113.22,L155.50 394.99,L75.30 43.63"><title>Alt+X</title></path>
<circle id="track" cx="200" cy="200" r="80"><title>调节进度</title></circle>
<circle id="prog" cx="200" cy="200" r="80"><title>调节进度</title></circle>
</svg>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
FS(pa, player);
</script>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 本帖：
（一）小播构图
SVG小播，内有一个 <path> 标签做音频控制按钮，两个 <circle> 标签做播放进度指示与调节。它们叠加在一起，circle 处在最上层。
SVG子元素的 fill 和 stroke 均使用了对应的 *-opacity 属性，这两个填充、描边透明度即可在CSS中设置，也可以作为svg子元素标签的属性进行设置。
（二）SVG子元素提示语
JS模块针对小播的 title 属性基于HTML标签，SVG不认识，因此，若需要鼠标指针移动到对应svg子元素时弹出提示语，则应给对应子元素加入 <title> 标签。<path>、<circle> 本帖都加入了 <title> 子标签。 漂亮的图图，漂亮的小播。黑黑老师辛苦了！ 桃花雪，好漂亮，不过那小播，有点那啥青天白日。。。。{:4_170:} 马黑黑 发表于 2025-9-13 07:47
本帖：
（一）小播构图
刚看到进度条在里面，觉得应该是进度条小于按纽图案，所以跟之前的时度条包裹小播图案不同。。
不明白的是没看到Z值，进度条就自动位于上方。。。
试了一下代码，发现排列顺序也可以控制层级。。这个知识点之前有印象，用得却不多。{:5_162:} 马黑黑 发表于 2025-9-13 07:47
本帖：
（一）小播构图
子标签提示直接写在后面就行了啊，简单明了，好方便的感觉。。 fill-rule: evenodd;这个填充方式换成nonzero就全填了，
想试试跟小程序里的无填色，只有线条，没有试出来{:4_173:} 樵歌 发表于 2025-9-13 09:47
桃花雪，好漂亮，不过那小播，有点那啥青天白日。。。。
你还算客气，没说俺是从武大的椅子背那里复制来的图案{:4_170:}
青天白日旗长酱紫：
https://ts4.tc.mm.bing.net/th/id/OIP-C.Sjs93lC5fM73_C8WMxhU8wAAAA?r=0&rs=1&pid=ImgDetMain&o=7&rm=3
世间图案长的相似、相近是常见现象，不要泛政治化哈
梦江南 发表于 2025-9-13 09:22
漂亮的图图，漂亮的小播。黑黑老师辛苦了！
{:4_190:} 花飞飞 发表于 2025-9-13 10:24
刚看到进度条在里面，觉得应该是进度条小于按纽图案，所以跟之前的时度条包裹小播图案不同。。
不明白的 ...
没有特别设置相关属性值的时候（如z-index，该值一般用于设置 position: absolute; 的元素层级关系），按后来者居上的原则布局层级关系。 花飞飞 发表于 2025-9-13 11:05
fill-rule: evenodd;这个填充方式换成nonzero就全填了，
想试试跟小程序里的无填色，只有线条，没有试出来 ...
需要设置 stroke 描边颜色和厚度，fill 设为 none 或透明。 花飞飞 发表于 2025-9-13 10:27
子标签提示直接写在后面就行了啊，简单明了，好方便的感觉。。
写在里面，<title> 是 其它子标签的子标签 马黑黑 发表于 2025-9-13 11:17
没有特别设置相关属性值的时候（如z-index，该值一般用于设置 position: absolute; 的元素层级关系），按 ...
嗯，本来这样的层级用得不多有点模模糊糊的，你这么一说就确定定了。。{:4_173:} 马黑黑 发表于 2025-9-13 11:18
需要设置 stroke 描边颜色和厚度，fill 设为 none 或透明。
啊啊，知道了，没看到线条是因为没设
也就是现在看到的图案其实是因为填充的时候按奇偶填充，所以出来镂空部分。。
我看到的其实不是我认为的。。{:4_170:} 马黑黑 发表于 2025-9-13 11:19
写在里面， 是 其它子标签的子标签
两个标签还不同，区分明显。。{:4_175:}每天都有新的知识点 花飞飞 发表于 2025-9-13 12:04
两个标签还不同，区分明显。。每天都有新的知识点
这个不新 花飞飞 发表于 2025-9-13 12:02
啊啊，知道了，没看到线条是因为没设
也就是现在看到的图案其实是因为填充的时候按奇偶填充，所以出来镂 ...
svg子元素，fill 填充，stroke 描边，fill 可以有填充规则，针对路径交叉，用 fill-rule 属性，只有两种可能，nonzero，evenodd，其数学原理需要大班数学知识才能理解。 前面讲太阳花的图案，这里就已经用上了，这个真漂亮。
背景的梅花和视频的配置也极好。{:4_199:} 马黑黑 发表于 2025-9-13 07:47
本帖：
（一）小播构图
原来对于js无法识别的title 可以写在需要使用它的子标签的内部。学习了{:4_187:}