javascript - 在 SVG 标签内使用动态渲染图像有什么可能吗？

Question

我面临一个关于 SVG 和 :src 绑定的问题。如果没有 SVG 标签，我对 img 的动态渲染可以完美地工作，但是一旦实现了 SVG 标签， :src 就无法正常工作并且图像也不会显示。但是我需要 SVG 标签来做多边形，因为每次用户将鼠标悬停在图片上时，图片的一部分都会被突出显示。好像 src 只有在传入静态数据时才能工作

<template>
  <div>
      <svg xmlns="http://www.w3.org/2000/svg" :viewBox="computed_viewBox" >
        <!-- here need to change -->
        <!-- <img
          svg-inline
          src="./Carline - Sedan 4 Doors.svg"
          width="100%"
          height="100%"
        /> -->
        <!-- <VueSimpleSVG
          custom-id="svgId"
          :src="showImage"
          width="100%"
          height="100%"
          @load="svgLoaded()"
        /> -->
        <!-- <img svg-inline :src="showImageRequire" width="100%" height="100%" /> -->
         <img v-svg-inline :src="showImage" width="100%" height="100%" /> 
        <!-- <path :d="bodyTypeImagePath"/> -->
        <!-- <img v-bind:src="'~svg/car_line_diagram/'+showImage+'.svg'" width="100%" height="100%" /> -->
        
      </svg>
    <br />
  </div>
</template>

showImage() {
      if (!this.bodyTypeImagePath) {
        return;
      }
      var fileName = this.bodyTypeImagePath;

      console.log("fileName")
      console.log(fileName)
      // var path =`~svg/car_line_diagram/${fileName}.svg`
      var path =`./${fileName}.svg`

      // return fileName;
      // return require(`../../assets/car_line_diagram/${fileName}.svg`);
      return path 
    },

标签： javascriptvue.jssvgquasar-framework