如何使用 CSS 控制 SVG 滤镜属性值？

Question

我想在 CSS 中创建动画，其中一部分我需要控制 SVG 滤镜属性的值。

下面，我尝试在 specularConstant 属性中调用一个 CSS 变量，浏览器 returns 出错。

或者，是否可以在 CSS 代码中使用选择器设置属性，或者是否有任何方法可以像这样通过 CSS 控制 SVG 属性？

下面是一个可重现的例子：

@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>

Answer 1

您需要使用 SVG <animate> 元素或 JavaScript 来完成。

如何使用 CSS 控制 SVG 滤镜属性值？

How to control SVG filter attribute values using CSS?

css

css-animations

svg-filters

css-variables