javascript - SVG 动画在以编程方式设置样式时有效，但在仅使用样式表时无效

Question

我有一个 svg 文档，其中包含样式表。使用样式表我可以设置矩形的填充(样式表正在工作)。我想做的是设置一个变色动画。我有以下样式表:

@keyframes blinking-effect {
    0% {
        stroke: rgba(255, 255, 0, 1);
        fill: rgba(0, 220, 0, 1);
    }
    100% {
        stroke: rgba(255, 255, 255, 0);
        fill: rgba(0, 0, 220, 1);
    }
}
.animation {
    animation-name: "blinking-effect";
    animation-duration: "0.5s";
    animation-iteration-count: "infinite";
    animation-timing-function: "ease-in-out";
    animation-direction: "alternate";
}


<rect id="rect1" x="0" y="0" width="50%" y="50%" class="animation " />

我不知道为什么这不起作用。但是，当我执行以下代码时，它确实有效:

document.getElementById("rect1").style.setProperty("animation-name", "blinking-effect");
document.getElementById("rect1").style.setProperty("animation-duration", "0.5s");
document.getElementById("rect1").style.setProperty("animation-iteration-count", "infinite");
document.getElementById("rect1").style.setProperty("animation-timing-function", "ease-in-out");
document.getElementById("rect1").style.setProperty("animation-direction", "alternate");

有没有办法在不使用 JavaScript 的情况下做到这一点？

Answer 1

丢失 CSS 上的引号。

.animation {
    animation-name: blinking-effect;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}

另外，矩形有重复的 y 属性并且没有宽度，我认为这是一个拼写错误，并且动画类属性以空格结尾，我认为这是另一个拼写错误。