svg - 高斯模糊的@keyframes (svg)

Question

我正在创建基于 GaussianBlur 的动画（属性“stdDeviation”），标签“animate”内部一切正常，但我正在尝试使用 css 动画。而且它不起作用。当我将属性“stdDeviation”放入@keyframes 浏览器时返回“未知属性名称”。动画的工作版本：

<filter id="f2" width="250%" height="250%">
<feOffset result="offOut" in="SourceGraphic" dx=".5" dy=".5" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" id="gauss">
<animate attributeName="stdDeviation" attributeType="XML" dur="2s" values="1 ;  1.5 ; 2 ; 2.5 ; 3 ; 2.5 ; 2 ; 1.5 ; 1 " keyTimes="0 ; .13 ; .26 ; .39 ; .52; .65 ; .78; .9; 1" repeatCount="indefinite"/>
</feGaussianBlur>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>

@keyframes，它们不起作用：

#gauss {
    -webkit-animation: gauss_keys 3s ease-out forwards infinite;
    animation: gauss_keys 3s ease-out forwards infinite;}
@keyframes gauss_keys {
    0% {
        stdDeviation: 0;
    }
    100% {
        stdDeviation: 2;
    }}

Answer 1

stdDeviation 不是 CSS 属性，不能使用 CSS 动画进行动画处理。您必须使用 SMIL 或 JavaScript。