SVG心形路径播放按钮（带进度指示）

马黑黑

<style> #heart { fill: pink; stroke: red; stroke-width: 4; transition: 0.25s; cursor: pointer; } </style> <svg id="msvg" width="200" height="200" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"> <path id="heart" d="M0 190 C-200 20,-300 -320,0 -100 C300 -320,200 20,0 190" stroke-dasharray="1227" stroke-dashoffset="1227"> <title id="tit">播放/暂停</title> </path> </svg> <audio id="aud" src="https://music.163.com/song/media/outer/url?id=555121065" autoplay loop></audio> <script> const pathlength = heart.getTotalLength(); // 获取路径长度 // 音频播放时 : 进度变更+跳动 aud.ontimeupdate = () => { heart.setAttribute('stroke-dashoffset', pathlength - pathlength * aud.currentTime / aud.duration); heart.setAttribute('opacity', Math.random() * 0.5 + 0.5); }; // 点击心形路径 : 播放/暂停 heart.onclick = () => aud.paused ? aud.play() : aud.pause(); // 提示语 aud.onplaying = aud.onpause = () => tit.textContent = aud.paused ? '点击播放' : '点击暂停'; </script>

马黑黑

SVG设置有 viewBox 属性，这意味着，不论 SVG 宽高如何设置，绘制于 viewBox 之内的路径长度都是固定的、不因SVG的宽高而改变。因此通过 svg元素.getTotalLength() 函数获得路径长度（这里约等于1227）可以直接用于设置 path 标签的偏移相关属性值，后面的JS重新获取路径长度是为了计算更精准。

如果希望还可以控制音频的播放进度，那情况会复杂得多。我们之前的小播插件中，有用不规则路径做的，其实现原理大约酱紫：

一、采集路径上的点坐标，一般存入数组中；
二、获取鼠标指针在路径上点击的点的坐标数据，并和路径点坐标集合进行比对，确定相符的点坐标数据；
三、根据该点坐标数据，确定该点和路径起点的距离；
四、计算音频应播放到的时间节点。

核心就是确定点击点离路径开始点的距离，处理起来需要相当多的复杂计算，所用到的数学原理和JS内置的操作svg的相关API也会比较多。

花飞飞

这个沿不规则SVG路径做进度条的，比规则的计算复杂的多了吧。。。今天这是又升级啦

花飞飞

stroke-dasharray="1227" stroke-dashoffset="1227"
看到这两个熟面孔，虚线和偏移量都是1227，这是怎么算出来的呢。

JS里都看不太懂了，只知道这句是透明度随机
heart.setAttribute('opacity', Math.random() * 0.5 + 0.5);

花飞飞

代码简洁，核心计算强悍。。
之前做过类似的自由路径播放器，效果一样精彩

马黑黑

花飞飞 发表于 2025-9-8 18:55
代码简洁，核心计算强悍。。
之前做过类似的自由路径播放器，效果一样精彩

谢赞

马黑黑

花飞飞 发表于 2025-9-8 18:52
stroke-dasharray="1227" stroke-dashoffset="1227"
看到这两个熟面孔，虚线和偏移量都是1227，这是怎么算 ...

1227在二楼不是讲到了吗？

马黑黑

花飞飞 发表于 2025-9-8 18:37
这个沿不规则SVG路径做进度条的，比规则的计算复杂的多了吧。。。今天这是又升级啦

这个确实复杂，不过以前做过的

杨帆

漂亮！谢谢马老师精彩分享

马黑黑

杨帆 发表于 2025-9-8 19:13
漂亮！谢谢马老师精彩分享

花飞飞

马黑黑 发表于 2025-9-8 19:08
这个确实复杂，不过以前做过的

记得做过，我曾用过杯子，小伞，还可以自己根据形状画的路径。。
那时候觉得换个路径就可以啦没有认真学原理

花飞飞

马黑黑 发表于 2025-9-8 19:07
1227在二楼不是讲到了吗？

看到了说是它自己计算的

花飞飞

马黑黑 发表于 2025-9-8 19:06
谢赞

多来几个谢，果子不够了

红影

这颗粉色的心做过漂亮的虚线偏移，现在又做了带路径的播放按钮，黑黑对它开发运用得真好

红影

上次的心是大小变化的，这次的是明暗变化，无论怎样，都做成了动态的呢

马黑黑

红影 发表于 2025-9-8 22:00
上次的心是大小变化的，这次的是明暗变化，无论怎样，都做成了动态的呢

虽然很蹩脚

马黑黑

红影 发表于 2025-9-8 21:59
这颗粉色的心做过漂亮的虚线偏移，现在又做了带路径的播放按钮，黑黑对它开发运用得真好

粗糙的制作

红影

马黑黑 发表于 2025-9-9 08:22
虽然很蹩脚

哪里，都很漂亮呢

红影

马黑黑 发表于 2025-9-9 08:22
粗糙的制作

咋一下子变这么谦虚了

马黑黑

红影 发表于 2025-9-9 22:13
咋一下子变这么谦虚了

胡须长了