Question

我已经看到很多关于如何进行像here这样的颜色的完整对象动画的问题和答案。但是，是否可以通过填充（路径内部）为锐利的移动颜色块设置动画？如何动画这样的SVG？

Answer 1

您可以查看几个Javascript库：svgjs或Snap.svg ....应该指向正确的方向。

只需快速编写一段代码就可以了解snap的工作原理。我会给你一个senario，你想在悬停时更改svg的填充。

<svg id="targetSvg" ...>
    <!-- path forming the upper shell -->
    <g>
    <path id="1" fill="#000" d="..."/>
    <path id="2" fill="#fff" d="..."/>
    <path id="3" fill="#000" d="..."/>
    </g>
</svg>

的Javascript

//select the svg you want to have the effect on
s = Snap("#targetSvg");

s.select("g").hover( isHover, idHoverOut );

function isHover() {
    this.selectAll('path').forEach( function( el ){
        el.attr({ class: 'fadeIn' })  } );
};

function isHoverOut() {
    this.selectAll('path').forEach( function( el ){
        el.attr({ class: 'fadeOut' })  } );
};

Css样式

.fadein {
   transition: fill 1s linear;
   fill:blue;
}

.fadeout {
   transition: fill 1s linear;
}

使用CSS为路径上的SVG填充设置动画

1 个答案: