如何使用 CSS 控制 SVG 过滤器属性值？答案

【问题标题】：How to control SVG filter attribute values using CSS?如何使用 CSS 控制 SVG 过滤器属性值？
【发布时间】：2021-10-01 14:34:14
【问题描述】：

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

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

或者，是否可以在 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>

【问题讨论】：

标签： css css-animations svg-filters css-variables

【解决方案1】：

您需要使用 SVG <animate> 元素或 JavaScript 来执行此操作。

【讨论】：

那么有没有办法通过CSS来控制呢？对我来说，通过 CSS 对其进行控制很重要，因为这样我就可以将它集成为系统动画的一部分。
过滤器属性不会暴露给 CSS。对不起。如果您想通过 CSS 控制它，那么您需要定义与帧一样多的过滤器，并使用 CSS 切换每帧应用一次的过滤器。这太疯狂了——最好使用 JavaScript。
我希望有一些方法可以通过 CSS 来控制它。无论如何，谢谢。
如果答案正确，请标记为正确。