In my Vue Project, I have implemented a component named demo.vue.
This particular component features a complex svg within its <template>.
When an element is clicked, the Javascript should alter the color of one of the svg's drop shadows.
The svg design was exported from Figma and after some investigation, I discovered that the desired drop shadow color can be modified as shown below:
<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"/>
//The above code snippet represents a red drop shadow
To achieve the color change, the code should resemble 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 attempted to tackle this issue in the following manner:
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"
}
Unfortunately, CSS does not recognize the values property,
leading to the following inquiry:
How can I dynamically change the color of my drop shadow in JavaScript with just a button click?