如何将Vue项目中SVG文件元素赋值改写为长尾关键词？

本文共计1149个文字，预计阅读时间需要5分钟。

前言：项目中使用的svg图像比较复杂，还需要对里面的元素赋值等。

在HTML中有试用过svg，在vue中还是第一次尝试。百度了很多，要配置webpack.base.conf.js，还要封装组件什么的，但是具体怎么做呢？

前言

项目里面用的svg图片比较复杂，还要对里面的元素赋值等等的。在HTML里面有试着用过svg，在vue里面还是第一次尝试。百度了很多要配置webpack.base.conf.js,还要封装组件什么的，但是没有用，那些方法应该是对icon的svg或者简单的svg图片有用吧。后面改变思路，想着能不能组件的形式引入svg文件。静态界面下看看能不能实现，然后在做动态赋值。折腾了一天，还是弄出来了。真不容易，看来svg这一块还是要好好学学的。话不多说，直接放代码吧！

第一步：

1、先看看我们要用的svg的文件代码，原先我是整个文件这样子引入到vue里面，但是图片不显示出来。后面一步一步的检查测试后才发现不能写有下面的这个声明。

<?xml version="1.0" encoding="utf-8"?> 这个是xml文件声明的，vue里面不能这样用，至于解释和原因，我也不懂，还是要进一步学习研究才知道了。