Vue项目中如何用JavaScript修改SVG的feColorMatrix实现阴影变色

核心原因说明 #

feColorMatrix的values是SVG元素的原生属性，不属于CSS可控范畴，所以用CSS类修改肯定无效，必须通过JavaScript直接操作DOM元素的属性来实现。

具体实现步骤 #

1. 组件模板部分

给触发按钮绑定点击事件，同时确保SVG里的feColorMatrix带有明确的id或者用Vue的ref标记：

<template>
  <div>
    <!-- 触发按钮 -->
    <button @click="changeShadowToGreen">切换为绿色阴影</button>
    <!-- 你的复杂SVG -->
    <svg>
      <defs>
        <filter id="dropshadow">
          <!-- 目标阴影控制元素 -->
          <feColorMatrix id="dropshadowID" type="matrix" values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" />
        </filter>
      </defs>
      <!-- SVG其他内容示例 -->
      <rect x="10" y="10" width="100" height="100" filter="url(#dropshadow)" />
    </svg>
  </div>
</template>

2. 脚本实现（分Vue2/3两种写法）

Vue2 Options API写法

<script>
export default {
  methods: {
    changeShadowToGreen() {
      // 通过id获取feColorMatrix元素
      const colorMatrix = document.getElementById('dropshadowID');
      if (colorMatrix) {
        // 设置绿色系的values值，可根据需求调整参数
        colorMatrix.setAttribute('values', '0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0.5 0');
      }
    }
  }
}
</script>

Vue3 Composition API写法

如果习惯用ref而非原生DOM选择器，也可以给feColorMatrix加ref：

<template>
  <!-- 其他内容不变，给feColorMatrix加ref标记 -->
  <feColorMatrix ref="shadowMatrix" type="matrix" values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" />
</template>

<script setup>
import { ref } from 'vue';

const shadowMatrix = ref(null);

const changeShadowToGreen = () => {
  if (shadowMatrix.value) {
    shadowMatrix.value.setAttribute('values', '0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0.5 0');
  }
}
</script>

补充说明 #

• values矩阵里的第5、10、15位分别对应红、绿、蓝通道的偏移值，调整这三个数值就能自定义阴影的基础色调
• 如果需要切换回红色阴影，只需再写一个方法，把values改回原参数即可

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