vue项目里面引用svg文件并给svg里面的元素赋值

vue项目里面引用项目里面引用svg文件并给文件并给svg里面的元素赋值里面的元素赋值

主要介绍了vue项目里面引用svg文件并给svg里面的元素赋值,本文分步骤通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的

参考借鉴价值，需要的朋友可以参考下

前言前言

项目里面用的svg图片比较复杂，还要对里面的元素赋值等等的。在HTML里面有试着用过svg，在vue里面还是第一次尝试。百度了很多要配置

webpack.base.conf.js,还要封装组件什么的，但是没有用，那些方法应该是对icon的svg或者简单的svg图片有用吧。后面改变思路，想着能不能组件的形式引入svg

文件。静态界面下看看能不能实现，然后在做动态赋值。折腾了一天，还是弄出来了。真不容易，看来svg这一块还是要好好学学的。话不多说，直接放代码吧！

第一步：第一步：

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

第二步：第二步：

东扯西扯的一堆，接下来我们看看vue里面的直接用法吧。 因为要用的svg文件有好几个，但是赋值什么的方法应该是一样的，所以我就把js文件单独抽出来了。顺

便补补svg一些元素属性的含义。