SVG path 是实现波浪线边框的唯一精确方案，需提取 d 属性值并加 path:// 前缀，配合伪元素、background-repeat 和整数坐标确保平滑复用与跨端兼容。
用 SVG path 替换 border 实现波浪线边框
HTML 原生 border-style 不支持波浪线（wave / wavy），必须绕过 CSS 边框系统，改用 SVG 路径作为按钮背景或伪元素内容。核心是把波浪线画成一条可复用的 <path>，再通过 path:// 协议注入到 CSS 的 background-image 或 ECharts 等支持 SVG URI 的场景中。
常见错误是直接复制 Figma 导出的完整 SVG 标签（含 <svg> 外壳和命名空间），结果浏览器无法解析；正确做法只取 d 属性值，前面加 path:// 前缀。
- 一个基础正弦波路径示例：
path://M0,0 C20,-10 40,10 60,0 C80,-10 100,10 120,0—— 这段用两次三次贝塞尔曲线拼出两个波峰波谷 - 若要铺满整个按钮上边框，需让路径横向重复：在 CSS 中设
background-repeat: repeat-x，并确保路径终点 x 坐标与起点对齐（如上面例子终点是 120，则重复单位宽应为 120） - 路径 y 坐标必须相对“基线”设计（比如全设在 y=0 附近），否则重复时上下错位；推荐先用 Inkscape 绘制单周期波形，导出后删掉
<svg>和<path>标签，只留d="..."内容
给 button 添加 wave 边框的 CSS 实操写法
不能直接写 border: 2px solid url('data:image/svg+xml,...') —— 多数浏览器不支持 SVG data URL 用于 border-image，但支持用于 background-image。所以得用“伪元素覆盖 + 背景定位”模拟边框效果。
关键点：按钮本身设 position: relative，用 ::before 伪元素撑出边框区域，再把 SVG 波浪路径当背景贴上去。
立即学习“前端免费学习笔记（深入）”；
-
::before必须有content: ""、position: absolute，且尺寸略大于按钮（例如 top/left 设 -2px，width/height 设 104%） - 波浪路径建议用
background-size: 120px 2px（匹配单周期宽度和线粗），background-position: 0 0，background-repeat: repeat-x - 为避免锯齿，路径坐标尽量用整数，避免小数点后多位；导出时关闭 Inkscape 的“响应式”选项，固定 viewBox 尺寸（如
viewBox="0 0 120 2"） - 移动端要注意：某些安卓 WebView 对
background-repeat+ SVG 的渲染有偏移，可加transform: translateZ(0)强制 GPU 加速
为什么不用 CSS repeating-linear-gradient 模拟波浪？
它只能画直线、斜线、圆点，画不出真正平滑连续的波形。有人尝试用多层渐变叠加伪造正弦，但参数极难调准，缩放后失真严重，且无法控制波长/振幅精度。
SVG path 是唯一能精确描述数学波形的方式。例如一个标准正弦波周期可写成：path://M0,0 Q30,-15 60,0 T120,0 —— 这里 Q 是二次贝塞尔，T 表示镜像前一控制点，比手算三次贝塞尔更简洁。
- 想调振幅？改 Q 后面的 y 值（如 -15 → -8）
- 想调波长？等比放大所有 x 坐标（0→0, 30→60, 60→120）
- 想反转方向？把所有 y 值取反（-15 → 15）
- 注意：路径必须以
M开头，以Z结尾才闭合；但波浪线通常不闭合，所以结尾不用Z
ECharts 图例中复用同一波浪路径
ECharts 的 legend.icon 支持 path://，但每个图例项要单独写一遍路径字符串。别硬编码——用 JS 拼接或提取为常量。
容易被忽略的是：ECharts 默认把图标居中绘制，而波浪路径如果 y 偏移过大（比如从 y=−20 开始），会导致图标整体上移。解决方法是在路径开头加 M0,10 把基线拉回视觉中心，而不是依赖默认对齐。
- 实测有效路径：
path://M0,10 Q20,5 40,10 T80,10—— 这个在 16×16 图标盒内显示稳定 - 若图例文字偏多，图标会被压缩，此时需同步缩小路径坐标（如全部 ÷2），否则超出裁剪区
- 不要在路径里写颜色；颜色由 ECharts 的
legend.textStyle.color或系列itemStyle.color控制
