Vue中如何用JavaScript为<img>引入的SVG实例修改颜色？

核心问题说明 #

用<img>标签引入SVG时，外部CSS无法修改其颜色——因为img加载的SVG是独立文档上下文，外部样式无法渗透到内部元素。以下是几种适配Vue动态变色需求的可行方案：

方案1：内联SVG + 动态绑定fill属性 #

直接把SVG代码嵌入Vue模板，就能通过v-bind动态设置fill颜色，可根据索引灵活控制：

<template>
  <div v-for="(item, index) in items" :key="index" class="svg-item">
    <!-- 替换为你的SVG代码，动态绑定fill颜色 -->
    <svg width="24" height="24" viewBox="0 0 24 24" :fill="getColor(index)">
      <path d="M19 12h-2V7h-2v5h-2V7H9v5H7V7H5v10h2v-5h2v5h2v-5h2v5h2v-5z"/>
    </svg>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [1,2,3,4] // 你的列表数据
    }
  },
  methods: {
    getColor(index) {
      // 按索引循环预设颜色，也可以用HSL动态计算
      const colorList = ['#ff4444', '#00C851', '#33b5e5', '#ffbb33']
      return colorList[index % colorList.length]
    }
  }
}
</script>

<style scoped>
.svg-item {
  margin: 8px 0;
}
</style>

方案2：CSS Mask + 动态背景色 #

你提供的mask思路完全可行，在Vue中通过:style动态绑定background-color即可实现按索引变色：

<template>
  <div v-for="(item, index) in items" :key="index" 
       class="mask-svg" 
       :style="{ backgroundColor: getColor(index) }">
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [1,2,3,4]
    }
  },
  methods: {
    getColor(index) {
      // 用HSL生成渐变色彩，索引每增加1，色相偏移60度
      return `hsl(${index * 60}, 70%, 50%)`
    }
  }
}
</script>

<style scoped>
.mask-svg {
  width: 24px;
  height: 24px;
  margin-top: 4px;
  /* 注意：SVG路径要使用原始资源地址，比如GitHub的raw链接 */
  mask: url('你的SVG原始地址') no-repeat center / contain;
  -webkit-mask: url('你的SVG原始地址') no-repeat center / contain;
}
</style>

方案3：修改SVG + 用currentColor兼容img标签 #

如果必须保留<img>标签，需要先修改SVG文件，再通过color属性动态控制：

1. 编辑你的SVG文件，把内部所有fill属性改为currentColor：

<svg xmlns="http://www.w3.org/2000/svg" ...>
  <path fill="currentColor" d="..." />
</svg>

2. Vue中动态绑定颜色：

<template>
  <div v-for="(item, index) in items" :key="index" class="img-item">
    <img src="你的SVG地址" :style="{ color: getColor(index) }" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [1,2,3,4]
    }
  },
  methods: {
    getColor(index) {
      return `hsl(${index * 80}, 80%, 50%)`
    }
  }
}
</script>

<style scoped>
.img-item img {
  width: 24px;
  height: 24px;
  margin-top: 4px;
}
</style>

注意：此方案要求SVG无跨域问题，否则color样式可能不生效。

内容的提问来源于stack exchange，提问作者Dzhake