更新记录

1.0.0（2021-03-04）

msvg版本1.0.0更新

平台兼容性

uniapp支持SVG绘制实例

uniapp一直以来不能支持svg，只有h5端支持svg标签的绘制app端并不支持，这是一个小的实例

大家可以，以此为思路绘制自己想要的图标或是图形，该方法是运用的renderjs方法引入了svg.js

的方式实现的svg的绘制。

注意事项

• 此方案不支持小程序不支持nvue
• 以何种规范书写大家可以看svg.js官网的文档

效果预览操作步骤

1. 使用HBX导入此插件项目。

2. 复制 整个标签（别复制这里的标签下载实例到实例复制整个标签这里不完整）

3. 在Msvg() 里绘制自己想要的图标或图画

4. Msvg() {
               let that = this;
               var draw = SVG().addTo('#content').attr({ viewBox:'0 0 1024 1024' }).size(200, 200); 
               draw.path('M437.78 474.5H336.49v-62.55h101.29c17.27 0.01 31.27 14.01 31.28 31.28 0 17.27-14.01 31.27-31.28 31.27zM473.84 648.28H361.03v-62.55h112.81c17.27 0 31.27 14 31.28 31.28 0 17.27-13.99 31.27-31.26 31.28-0.01-0.01-0.01-0.01-0.02-0.01z').fill('#EBB85D');
               draw.path('M637.63 194.41c-1.64-0.7-3.5-1.39-5.49-2.02-23.58-7.49-47.45 11.23-47.45 35.97a22.146 22.146 0 0 0 17.37 21.61c7.1 1.6 14.79 3.77 19.64 6.5a75.545 75.545 0 0 1 34.12 40.89c4.17 11.79 4.66 24.61 2.91 37l-61.19 433.48c-5.21 36.9-36.78 64.33-74.04 64.33h-36.75c-37.27 0-68.85-27.43-74.06-64.33L351.51 334.4c-1.83-12.87-1.16-26.19 3.39-38.36 10.81-29.53 38.9-49.17 70.34-49.18h75.31v-62.55h-71.87c-26.9 0-53.75 6.47-76.45 20.91-45.88 28.86-70.54 81.97-62.99 135.64l61.52 435.73c9.57 67.76 67.56 118.14 136 118.14h36.75c68.43 0 126.42-50.38 135.99-118.14l61.52-435.73c8.41-59.61-22.87-120.2-83.39-146.45z').fill('#D26500');
               draw.path('M473.47 239.59c-43.73-13.67-77.89-48.06-91.28-91.87-6.05-19.95 9.29-40.05 30.13-40.05 13.75 0.05 25.86 9.08 29.82 22.26 0.41 1.3 0.84 2.6 1.31 3.86 10.95 29.7 39.25 49.43 70.9 49.43v25.58c0.01 21.3-20.56 37.11-40.88 30.79z').fill('#EBB85D');
               draw.path('M497.75 247.05h-36.22c0-70.57 48.01-130.15 113.08-147.79 20.11-5.46 40.05 9.3 40.05 30.13-0.08 14.24-9.75 26.64-23.53 30.2-31.42 8.51-55.89 33.18-64.13 64.68-3.42 13.37-15.45 22.74-29.25 22.78z').fill('#EBB85D');
               draw.path('M303 372.01l61.5 435.73c9.57 67.76 67.57 118.14 136 118.14h36.75c68.44 0 126.43-50.38 135.99-118.15L734.76 372c8.41-59.61-22.86-120.19-83.36-146.43-1.66-0.72-3.5-1.39-5.51-2.03-23.58-7.49-47.43 11.24-47.43 35.98 0 10.38 7.22 19.36 17.36 21.6 7.11 1.6 14.81 3.78 19.64 6.51a75.426 75.426 0 0 1 34.12 40.89c4.18 11.79 4.68 24.61 2.92 37.02l-61.19 433.47c-5.22 36.9-36.8 64.33-74.06 64.33H500.5c-37.26-0.01-68.84-27.44-74.06-64.33l-16.87-119.56h78.03c17.27 0.1 31.35-13.83 31.45-31.1 0.1-17.27-13.83-31.35-31.1-31.45h-87.21l-15.7-111.25h66.49c17.27 0.1 31.35-13.83 31.45-31.1 0.1-17.27-13.83-31.35-31.1-31.45H376.2l-10.95-77.55c-1.81-12.87-1.16-26.18 3.39-38.36 10.81-29.52 38.9-49.16 70.34-49.18h36.31l-0.02 0.19h36.22c0.41 0 0.73-0.17 1.14-0.19h1.66v-0.28c12.64-1.11 23.23-10.04 26.44-22.31a89.818 89.818 0 0 1 12.59-27.8 90.938 90.938 0 0 1 51.56-36.87c13.78-3.56 23.44-15.96 23.52-30.2 0-20.83-19.92-35.59-40.03-30.13a153.805 153.805 0 0 0-94.89 75.52 75.817 75.817 0 0 1-36.29-40.99c-0.47-1.27-0.91-2.55-1.3-3.86-3.97-13.17-16.08-22.2-29.84-22.25-20.83 0-36.19 20.11-30.13 40.05a137.47 137.47 0 0 0 19.42 39.17c-17.47 3.02-34.35 8.79-49.37 18.33-45.86 28.84-70.52 81.95-62.97 135.62z').fill('#EBB85D').attr({ opacity:'.2' });
   
           } 

目录结构

• static 静态资源
  • svg.js svg文件

帮助

如果是小白实在不明白看上面全是123abc的符号看不懂怎么绘制可以找我咨询 邮箱账号：deng@denglihui.cn