将svg图转换为vue组件并实现放大缩小功能

前言：(注意放大缩小是基于jquery的，还需要引入jquery文件)

         目前有需求遇到需要将原始的svg文件，xml类型的，放到vue中，转换为我页面可以用的组件，还要实现放大缩小功能；

展示效果：

步骤：

一、将原始的svg的代码扒拉下来，xml最上面的一行删掉

二、因为style在vue组件中只能有一个，需要把原始svg的style拿出来放到组件style里

三、将svg的代码放到组件的template里面

下面是引入的js文件：

import $ from 'jquery' //引入jquery插件

 import "@/assets/js/jquery.svg.pan.zoom.js";

       百度网盘地址：https://pan.baidu.com/s/1io0JAjnG25m5EdIvYZ1exw  提取码：f69s

下面是我的组件：indexSvg.vue 地址：

       百度网盘地址：https://pan.baidu.com/s/14zLLYVNXwv3VW7mCgg_t2A  提取码：w49p

第四：这里在分享一个jquery+svg+放大缩小的案例

        百度网盘：https://pan.baidu.com/s/1CAW4_ttaFxkVOxaeMCK4Hg  提取码：bfj2