从中心到外部填充树

Question

我正在尝试使用 SVG，我做了这个 link。现在我想知道如何从中心向外填充背景中的树。它目前只是淡入淡出。 这是动画代码：

            .st0 {
                fill:#22a8d5;
                fill-opacity: 0;
                animation-timing-function: ease-in-out;
                animation-fill-mode: forwards;
                animation-iteration: 1;
                animation-name: fillup;
                animation-duration: 4s;
                animation-delay: 4s;

            }
            @-webkit-keyframes fillup {
                from { fill-opacity: 0; }
                to { fill-opacity: 1; }
            }

我试过了，但我就是不能让它工作，它要么滑入要么淡入。

Answer 1

两种可能的方法：

1. 把树变成<clipPath>，然后用它来剪裁一个你随着时间的推移动画其半径的圆。

2. 使用<radialGradient> 作为树的fill。然后随着时间的推移对渐变的半径进行动画处理。

第一种方法你可以用纯CSS实现，只要你用transform来扩大圈子。动画圈的 r 属性目前只能在 Chrome 中使用。

第二种方法只能在 Chrome 上使用纯 CSS 来实现。如果您需要跨浏览器支持，则需要使用 SVG <animate> 元素或 Javascript 来制作动画。