vue 3.8.4怎么引入本地svg文件并修改svg中的文字

Question

问题描述

我想在vue中引入本地svg图片,并修改其中的文字

问题出现的环境背景及自己尝试过哪些方法

这个我原本在jsp上的时候用<object>标签实现过,但是vue好像不支持<object>标签,使用后显示不出来
我网上查了下,网上倒是有资料,但是感觉都是2.x版本的,3.8版本根本没有build,config这些文件夹,

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
<template>
<!-- <object id="header" data="./svg/header.svg" :style="style"></object>-->
<!-- <img id="header" :style="style" data="./svg/header.svg"/>-->
<!-- <svg-icon icon-class="header"></svg-icon>-->
<!-- <svg-icon name="header" size="20"></svg-icon>-->

<icon name="header"/>

</template>

//显示svg图片的组件smtHeader.vue
<template>

<headerSvg ref="svg"/>

</template>
<script>

// import $ from 'jquery'
import headerSvg from './svg/header.svg';
export default {
    name: "smtHeader",
    components: {
        headerSvg,
    },
    data () {
        return {
            width : this.HeaderProp.width,
            height : this.HeaderProp.height
        }
    },
    props:{
        HeaderProp:{
            required: true
        }
    },
    computed: {
        style() {
            return {
                height: this.height + 'px',
                width: this.width + 'px'
            };
        }
    },
    mounted() {
        this.doTime();
    },
    methods : {
        doTime(){
            var a = new Array("日", "一", "二", "三", "四", "五", "六");
            var mydate = new Date();
            var week = mydate.getDay();
            var year = mydate.getFullYear();
            var month = mydate.getUTCMonth()+1;
            var day = mydate.getUTCDate();
            var hour = mydate.getHours();
            var minutes = mydate.getMinutes();
            var section = (hour>12) ? "下午" : "上午";
            var shift = "晚班";
            if((hour==8 && minutes >= 30) || (hour==20 && minutes <= 30) || (hour<=19 && hour>=9)){
                shift = "白班";
            }
            var ctime = year + "-" + month + "-" + day + " 星期" + a[week] + " " + section + " "+shift;
            const dom = this.$refs.svg.querySelector('#ctime_1');
            dom.innerHTML = ctime;
        },
    },
}

</script>
<style scoped>
</style>

//vue.config.js
//chainWebpack颜色是灰色的,应该是没地方引用
module.exports = {

publicPath: './',
chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();
    svgRule
        .use('vue-svg-loader')
        .loader('vue-svg-loader')
        .options({
            svgo: false,
        });
}

};

你期待的结果是什么？实际看到的错误信息又是什么？

我希望能通过代码上那种形式导入svg图片
求各位大佬教下,小白,刚自学入门,麻烦说仔细点,有截图更好

Answer 1

vue 3.8.4? 老哥你穿越回来的吗

---

控制台打印出来的那是vue-cli版本 vue版本是你package.json里面的2.6.10
回到你的问题，既然是用vue-cli创建的项目，基本配置应该都默认好了 你把文件import进来使用即可

<template>
  <object id="header" :data="headerSvg" :style="style"></object>
</template>
<script>
  import headerSvg from './svg/header.svg';
  
  export default {
    data() {
      return {
        headerSvg,
      };
    },

---

再更新，上面那样引用只能展示svg，如果想编辑svg的话，仅靠vue-cli的默认配置是不行的，你需要借助 vue-svg-loader

1.安装
npm i -D vue-svg-loader

2.配置
在你项目的根文件创建vue.config.js文件并加入下面的配置
注意因为你的需要ID筛选，我把svgo关闭了，它是默认启用的，可以压缩你的svg体积

module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');
    
    svgRule.uses.clear();

    svgRule
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
      .options({
        svgo: false,
      });
  },
};

3.使用
然后就可以像组件一样使用并修改svg了
header.svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <text x="0" y="15" fill="red" id="ctime">aaa1</text>
</svg>

.vue

<template>
  <div>
    <HeaderSvg ref="svg"/>
    <button @click="svgChange">修改</button>
  </div>
</template>
<script>
  import HeaderSvg from './header.svg';

  export default {
    components: {
      HeaderSvg,
    },
    methods: {
      svgChange() {
        const dom = this.$refs.svg.querySelector('#ctime');
        dom.innerHTML = 'bbb';
      },
    },
    data() {

Answer 2

这是不是vue-cli的版本号啊?