svg文件引入及如何作用于vue

svg文件引入及如何作用于vue

**
直接引入
将svg代码直接嵌入在vue内部,可以直接进行相关事件绑定操作
文件引入
关于svg文件引入,首先最重要的一部分就是svg文件引入使用的话,需要在服务器上的资源引入才能正常显示,不然无法正常显示.
svg文件引入及如何作用于vue

其次就是获取svg代码后直接获取svg dom 然后直接修改其中的属性
svg文件引入及如何作用于vue

关于svg事件绑定,需要用vue的写法但是不能用 : 绑定的方式
svg文件引入及如何作用于vue

下一点就是将改写的svg dom 挂载在vue组件中
svg文件引入及如何作用于vue

最后就是事件挂载并不能直接使用需要在组件中将实在挂载在window上(我也是试过用数组循环的方式挂载可是挂载能成功但是控制台会报错,不美观于是我选择了单一挂载)
svg文件引入及如何作用于vue

最后补充一点如果需要引入多个svg文件生成多个svg则需要每次去掉内部所有内容然后重新生成挂载标签
svg文件引入及如何作用于vue