weapp-svg-adapter

一个将内联 SVG 通过 Canvas 渲染到微信小程序的原生组件（支持 2D Canvas）。

• 直接传入完整 SVG 字符串：
  • 属性：<weapp-svg-adapter svg="<svg viewBox='0 0 24 24'><path d='M...Z'/></svg>" width="24" height="24" />
• 支持 TS，内置基础 SVG 标签/属性解析：svg/g/rect/circle/ellipse/line/polyline/polygon/path。
• 支持命令：M/m L/l H/h V/v C/c S/s Q/q T/t A/a Z/z；支持 translate/scale/rotate 与 viewBox 缩放。
• 支持样式继承：fill、stroke、stroke-width、stroke-linecap、stroke-linejoin、stroke-miterlimit、stroke-dasharray、stroke-dashoffset、currentColor。

使用

1. 安装（npm）：

   npm i weapp-svg-adapter

2. 在工具 - 构建 npm（微信开发者工具），并在“设置 > 实验性”开启“使用 2D Canvas”（或在真机支持 2D Canvas 的环境运行）。
3. 在页面/组件中引入：

   {
     "usingComponents": {
       "weapp-svg-adapter": "weapp-svg-adapter/weapp-svg-adapter"
     }
   }

4. 模板中使用：

   <weapp-svg-adapter svg="&lt;svg viewBox='0 0 24 24'&gt;&lt;path d='M3 12L21 12' stroke='currentColor'/&gt;&lt;/svg&gt;" width="24" height="24" />

注意：wxml 属性值需要进行转义（< 变成 <）。若字符串较长建议放在 JS 中 setData 传入。

5. JS 中 setData 传值（推荐，避免转义）：

this.setData({
  svg: '<svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12L21 12"/></svg>'
})

属性

• svg: string 完整 SVG 字符串
• width: number 组件宽度 px（默认 24）
• height: number 组件高度 px（默认 24）
• fill: string 默认填充色（默认 #000）
• stroke: string 默认描边色

支持度与限制

• 解析器为轻量实现，已支持大部分常见命令与描边样式，但暂不支持：文本、渐变/滤镜、外链、复杂 CSS 选择器等。
• A/a 弧线通过贝塞尔近似转换，极端弧度可能有微小误差。
• 建议在设计图标时尽量使用基本几何/路径命令以获取最佳效果。

常见问题排查

• 画布为空白：确认已开启“使用 2D Canvas”或在真机运行；基础库需支持 2D Canvas node。
• 仅描边不显示：检查是否 fill="none" 且设置了 stroke/stroke-width；也可通过组件属性 stroke 覆盖默认值。
• 尺寸不对：保证传入 SVG 拥有正确的 viewBox；组件会依据 viewBox 缩放到 width/height。

许可

MIT