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有多熟悉，但是使用预处理器和自动修复器使这种事情变得容易多了。

从css设置svg animate属性

1 个答案: