css - 从 css 设置 svg animate 的属性

Question

我有一个 SVG 动画，我想使用 css 设置 animate 标签属性 from 和 to。

喜欢:

animate{
    from: #f7f7f7;
    to: #33d424;
}

这可能吗，我该怎么做？

这是我的 SVG 代码:

<svg width='100px' height='100px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-squares">
        <rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
        <rect x="15" y="15" width="20" height="20" fill="#f7f7f7" class="sq">
            <animate attributeName="fill" from="#f7f7f7" to="#33d424" repeatCount="indefinite" dur="1s" begin="0.0s" values="#33d424;#33d424;#f7f7f7;#f7f7f7" keyTimes="0;0.1;0.2;1"></animate>
        </rect>
        <rect x="40" y="15" width="20" height="20" fill="#f7f7f7" class="sq">
            <animate attributeName="fill" from="#f7f7f7" to="#33d424" repeatCount="indefinite" dur="1s" begin="0.125s" values="#33d424;#33d424;#f7f7f7;#f7f7f7" keyTimes="0;0.1;0.2;1"></animate>
        </rect>
        <rect x="65" y="15" width="20" height="20" fill="#f7f7f7" class="sq">
            <animate attributeName="fill" from="#f7f7f7" to="#33d424" repeatCount="indefinite" dur="1s" begin="0.25s" values="#33d424;#33d424;#f7f7f7;#f7f7f7" keyTimes="0;0.1;0.2;1"></animate>
        </rect>
        <rect x="15" y="40" width="20" height="20" fill="#f7f7f7" class="sq">
            <animate attributeName="fill" from="#f7f7f7" to="#33d424" repeatCount="indefinite" dur="1s" begin="0.875s" values="#33d424;#33d424;#f7f7f7;#f7f7f7" keyTimes="0;0.1;0.2;1"></animate>
        </rect>
        <rect x="65" y="40" width="20" height="20" fill="#f7f7f7" class="sq">
            <animate attributeName="fill" from="#f7f7f7" to="#33d424" repeatCount="indefinite" dur="1s" begin="0.375" values="#33d424;#33d424;#f7f7f7;#f7f7f7" keyTimes="0;0.1;0.2;1"></animate>
        </rect>
        <rect x="15" y="65" width="20" height="20" fill="#f7f7f7" class="sq">
            <animate attributeName="fill" from="#f7f7f7" to="#33d424" repeatCount="indefinite" dur="1s" begin="0.75s" values="#33d424;#33d424;#f7f7f7;#f7f7f7" keyTimes="0;0.1;0.2;1"></animate>
        </rect>
        <rect x="40" y="65" width="20" height="20" fill="#f7f7f7" class="sq">
            <animate attributeName="fill" from="#f7f7f7" to="#33d424" repeatCount="indefinite" dur="1s" begin="0.625s" values="#33d424;#33d424;#f7f7f7;#f7f7f7" keyTimes="0;0.1;0.2;1"></animate>
        </rect>
        <rect x="65" y="65" width="20" height="20" fill="#f7f7f7" class="sq">
            <animate attributeName="fill" from="#f7f7f7" to="#33d424" repeatCount="indefinite" dur="1s" begin="0.5s" values="#33d424;#33d424;#f7f7f7;#f7f7f7" keyTimes="0;0.1;0.2;1"></animate>
        </rect>
    </svg>

Answer 1

您将不得不使用 CSS 动画而不是 SVG 动画。像这样:

http://jsfiddle.net/scarl3tt/g2frngcn/

@keyframes animate {
  0% {
    fill: #f7f7f7;
  }
  6.25% {
    fill: #33d424;
  }
  12.5% {
    fill: #f7f7f7;
  }
}

您还需要延迟每个元素的动画以使其按顺序运行。我用纯 CSS 编写了这篇文章，因为我不确定您对 SASS/LESS 有多熟悉，但是使用预处理器和自动前缀器可以使这种事情变得容易得多。