In my quest to master CSS animation, I found myself needing to manipulate the values of SVG filter attributes.
While attempting to reference a CSS variable within the specularConstant attribute, I encountered an error from the browser.
Is it feasible to set this attribute using a selector in CSS? Or perhaps there is another method to control SVG attributes like this through CSS?
Below is a demonstration:
@property --illumination-power {
syntax: '<number>';
initial-value: 1;
inherits: true
}
:root {
animation: my-animation 5s;
}
@keyframes my-animation {
0% {
--illumination-power: 0;
}
100% {
--illumination-power: 1.2;
}
}
body {
margin: 0;
background-color: black;
}<svg width="100vw" height="100vh">
<defs>
<filter id="spotlight">
<feSpecularLighting specularConstant="var(--illumination-power)"
specularExponent="10" lighting-color="white">
<fePointLight x="200" y="100" z="70"/>
</feSpecularLighting>
</filter>
</defs>
<rect id="light-background" x="-500%" y="-500%" width="1000%" height="1000%" fill-opacity="0" filter="url(#spotlight)"/>
</svg>