待到山花漫烂时

马黑黑

马黑黑

<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>

马黑黑

本帖：

（一）小播构图

        SVG小播，内有一个 <path> 标签做音频控制按钮，两个 <circle> 标签做播放进度指示与调节。它们叠加在一起，circle 处在最上层。

        SVG子元素的 fill 和 stroke 均使用了对应的 *-opacity 属性，这两个填充、描边透明度即可在CSS中设置，也可以作为svg子元素标签的属性进行设置。

（二）SVG子元素提示语

        JS模块针对小播的 title 属性基于HTML标签，SVG不认识，因此，若需要鼠标指针移动到对应svg子元素时弹出提示语，则应给对应子元素加入 <title> 标签。<path>、<circle> 本帖都加入了 <title> 子标签。

梦江南

漂亮的图图，漂亮的小播。黑黑老师辛苦了！

樵歌

桃花雪，好漂亮，不过那小播，有点那啥青天白日。。。。

花飞飞

马黑黑 发表于 2025-9-13 07:47
本帖：

（一）小播构图

刚看到进度条在里面，觉得应该是进度条小于按纽图案，所以跟之前的时度条包裹小播图案不同。。
不明白的是没看到Z值，进度条就自动位于上方。。。
试了一下代码，发现排列顺序也可以控制层级。。这个知识点之前有印象，用得却不多。

花飞飞

马黑黑 发表于 2025-9-13 07:47
本帖：

（一）小播构图

子标签提示直接写在后面就行了啊，简单明了，好方便的感觉。。

花飞飞

fill-rule: evenodd;这个填充方式换成nonzero就全填了，
想试试跟小程序里的无填色，只有线条，没有试出来

马黑黑

樵歌 发表于 2025-9-13 09:47
桃花雪，好漂亮，不过那小播，有点那啥青天白日。。。。

你还算客气，没说俺是从武大的椅子背那里复制来的图案


青天白日旗长酱紫：

                               
登录/注册后可看大图

世间图案长的相似、相近是常见现象，不要泛政治化哈

马黑黑

梦江南 发表于 2025-9-13 09:22
漂亮的图图，漂亮的小播。黑黑老师辛苦了！

马黑黑

花飞飞 发表于 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; 的元素层级关系），按 ...

嗯，本来这样的层级用得不多有点模模糊糊的，你这么一说就确定定了。。

花飞飞

马黑黑 发表于 2025-9-13 11:18
需要设置 stroke 描边颜色和厚度，fill 设为 none 或透明。

啊啊，知道了，没看到线条是因为没设
也就是现在看到的图案其实是因为填充的时候按奇偶填充，所以出来镂空部分。。
我看到的其实不是我认为的。。

花飞飞

马黑黑 发表于 2025-9-13 11:19
写在里面， 是 其它子标签的子标签

两个标签还不同，区分明显。。每天都有新的知识点

马黑黑

花飞飞 发表于 2025-9-13 12:04
两个标签还不同，区分明显。。每天都有新的知识点

这个不新

马黑黑

花飞飞 发表于 2025-9-13 12:02
啊啊，知道了，没看到线条是因为没设
也就是现在看到的图案其实是因为填充的时候按奇偶填充，所以出来镂 ...

svg子元素，fill 填充，stroke 描边，fill 可以有填充规则，针对路径交叉，用 fill-rule 属性，只有两种可能，nonzero，evenodd，其数学原理需要大班数学知识才能理解。

红影

前面讲太阳花的图案，这里就已经用上了，这个真漂亮。
背景的梅花和视频的配置也极好。

红影

马黑黑 发表于 2025-9-13 07:47
本帖：

（一）小播构图

原来对于js无法识别的title 可以写在需要使用它的子标签的内部。学习了