进度条是前端界面里最常见的组件之一，绝大多数场景下用几个view加border-radius就能搞定。但一旦需求变成环形进度、弧形仪表盘或者跟随异形轮廓的进度填充，传统方案就开始吃力了。SVG作为矢量图形标准，天生适合描述这类不规则路径，配合描边动画可以做出非常精致的进度效果。这篇文章就来聊聊在微信小程序里怎么落地这套方案。
小程序能不能直接写SVG标签
答案是不能。微信小程序的WXML并不是标准的HTML，它没有提供<svg>、<path>这些内置组件，你在WXML里写SVG标签会被直接忽略，页面上一片空白。这是很多从Web前端转过来的开发者第一个踩的坑，明明在浏览器里运行得好好的代码，搬到小程序里就失效了。
不过小程序提供了两条替代路径：第一种是把SVG当作静态图片，通过image组件加载；第二种是把SVG转成base64编码，直接写进CSS的background-image或者image的src属性里。前者适合纯静态图标，后者适合需要动态改颜色的场景。如果进度需要实时变化，还可以借助CSS变量或者干脆在JS里动态拼接SVG字符串再编码。
还有第三种思路是用canvas绘制，小程序的Canvas 2D接口支持path相关API，理论上能实现所有SVG效果，但代码量会翻好几倍，坐标计算全靠手写，维护成本高。除非要做非常复杂的粒子特效，一般进度需求不建议上来就用canvas。
描边动画的核心原理：stroke-dasharray与stroke-dashoffset
SVG实现进度条的精髓在于两个属性。stroke-dasharray表示虚线的排列方式，比如设置为100 900就代表画100单位的实线，再空900单位的空白。而stroke-dashoffset表示虚线的起始偏移量。两者配合起来，就能实现“显示路径的一部分”这种效果。
举个具体的例子，假设一个圆环的周长是1000，我把dasharray设为1000，dashoffset也设为1000，此时实线部分被完全偏移出去，圆环不可见。然后把dashoffset逐渐减小到500，就有500单位的实线被画出来，看起来就是进度走到了百分之五十。把这个逻辑写成代码：
<svg viewBox="0 0 200 200">
<circle cx="100" cy="100" r="80"
fill="none" stroke="#e5e5e5" stroke-width="10"/>
<circle cx="100" cy="100" r="80"
fill="none" stroke="#07c160" stroke-width="10"
stroke-linecap="round"
stroke-dasharray="502.65"
stroke-dashoffset="502.65"
transform="rotate(-90 100 100)"
style="transition: stroke-dashoffset 0.3s ease;"/>
</svg>这里r等于80，周长是2乘以π乘以80，约等于502.65。底部的灰色圆环做轨道，上层的绿色圆环做进度，rotate(-90)让起点从12点钟方向开始，stroke-linecap="round"给端点加上圆角。进度变化时只需要修改offset值为502.65乘以(1减去百分比)，过渡动画交给CSS的transition就行。
在小程序中的完整实现步骤
原理清楚了，接下来解决“怎么让SVG在小程序里跑起来”。最稳妥的方案是在JS里拼接SVG字符串，encodeURIComponent之后赋给image组件的src。先写一个工具函数：
function buildRingSvg(percent, color) {
const r = 80;
const circumference = 2 * Math.PI * r;
const offset = circumference * (1 - percent / 100);
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="${r}" fill="none" stroke="#eee" stroke-width="12"/>
<circle cx="100" cy="100" r="${r}" fill="none" stroke="${color}"
stroke-width="12" stroke-linecap="round"
stroke-dasharray="${circumference}"
stroke-dashoffset="${offset}"
transform="rotate(-90 100 100)"/>
<text x="100" y="110" text-anchor="middle" font-size="36" fill="#333">${percent}%</text>
</svg>`;
}
Page({
data: {
ringSrc: ''
},
onReady() {
const svg = buildRingSvg(66, '#07c160');
this.setData({
ringSrc: 'data:image/svg+xml;utf8,' + encodeURIComponent(svg)
});
}
});注意两点细节：第一，SVG字符串里必须带上xmlns命名空间声明，否则image组件无法识别；第二，使用encodeURIComponent编码可以正确处理中文、井号等特殊字符，避免src解析出错。WXML里直接渲染即可：
<image src="{{ringSrc}}" style="width:300rpx;height:300rpx;"/>进度需要动态更新时，比如下载进度回调，重新调用setData更新ringSrc就行。由于每次都是重新生成整张SVG，transition动画不会生效，如果需要平滑过渡，可以把进度差值拆成多个步骤用定时器逐步更新，或者改用CSS变量方案：把SVG里写死颜色的地方换成var(--progress-color)，配合view的style属性动态修改变量值，这样浏览器内部会自动做颜色过渡。
不规则路径进度与方案对比
圆环只是入门，真正的“不规则”进度条指的是任意曲线。比如一个沿着地图边界流动的轨迹线，或者五角星轮廓的点亮效果。做法是一样的，先在设计软件里导出路径的d属性，然后用JS获取路径总长度。浏览器里可以用getTotalLength方法，但小程序没有DOM，所以要在开发阶段用浏览器量好长度写死，或者用svg-path-properties这类npm包在纯JS环境计算：
const svgPathProperties = require('svg-path-properties');
const properties = new svgPathProperties('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80');
const length = properties.getTotalLength(); // 提前算好路径总长
const visible = length * 0.4; // 显示百分之四十
const path = `<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"
fill="none" stroke="#ff6600" stroke-width="6"
stroke-dasharray="${length}" stroke-dashoffset="${length - visible}"/>`;拿到长度后，剩余逻辑与圆环完全一致。最后简单对比一下三种方案的适用场景：image加SVG字符串适合中低频更新的进度展示，实现简单、矢量清晰、文件小；canvas适合每帧都变化的高频动画，比如实时波形图，但开发量大且要处理高分屏适配；纯view加transform的方案只适合直线型进度条，胜在零依赖、性能最好。实际项目中建议优先SVG方案，一个150字节的SVG能替代一张几KB的PNG切图，还能任意改色改粗细，这在需要多主题切换的小程序里尤其有价值。
总结一下关键点：小程序不支持直接写SVG标签，但可以通过data URI编码后交给image组件渲染；进度控制依赖stroke-dasharray和stroke-dashoffset的配合；路径总长度要提前计算好。掌握这些，环形、弧形、任意曲线的进度效果都能轻松实现。