VueJS how to set value of feColorMatrix-CodePudding

In my Vue Project i have a component called demo.vue.

Said component contains a rather complex svg in its <template>. Now @click on one of said elements, the Javascript should change the color of one of the svg's dropshadows.

The svg is a design exported from Figma and i figured out that the dropshadow i want to change the color of is set as follows:

<feColorMatrix id="dropshadowID" type="matrix" values="0 0 0 0 1 0 0 0 0 0.233333 0 0 0 0 0.233333 0 0 0 0.25 0" result="hardAlpha"/> //Displays a red dropshadow

The code for the color i want to achieve would look like this:

<feColorMatrix id=dropshadowID type="matrix" values="0 0 0 0 0.233333 0 0 0 0 1 0 0 0 0 0.31 0 0 0 0.25 0"/>

I tried to approach it like this:

Javascript

function changeDropshadow() {
    var target = document.getElementById('dropshadowID')
    target?.classList.add('greenShadow')
}

CSS

.greenShadow {
    values="0 0 0 0 0.233333 0 0 0 0 1 0 0 0 0 0.31 0 0 0 0.25 0"
}

However, CSS does not know the values property. That leaves me with the following question:

How can i change the color of my dropshadow in Javascript with the click of a button?

CodePudding user response：

You can just assign your values to a variable and update it in the Vue code

// template
<feColorMatrix id="dropshadowID" type="matrix" :values="values" result="hardAlpha"/>

<script setup>
const values = ref('0 0 0 0 1 0 0 0 0 0.233333 0 0 0 0 0.233333 0 0 0 0.25 0')
function changeDropshadow() {
    values.value = "0 0 0 0 0.233333 0 0 0 0 1 0 0 0 0 0.31 0 0 0 0.25 0"
}

</script>

Demo