SVG动画。绘制后填充路径 [英] SVG animate. Fill path after drawn

问题描述

我创建了一个svg文件，页面加载时轮廓被绘制。
动画完成后，我要填写轮廓。

I have created an svg file where the outlines get "drawn" when the page loads. After the animation is done I want to fill in the outlines.

这就是我所做的。

有多个路径。这是一个：

There are multiple paths. Here is one:

<path id="b1" class="b1" d="M95.4,204.9a31.7,31.7,0,0,1,23,9.6,32.8,32.8,0,0,1,6.9,10.8,38.7,38.7,0,0,1,0,27.4,32.8,32.8,0,0,1-6.9,10.8,31.7,31.7,0,0,1-23,9.6,25.7,25.7,0,0,1-11.9-2.6,25.4,25.4,0,0,1-8.3-6.8v7.7H61V174H75.1v40.3a25.4,25.4,0,0,1,8.3-6.8A25.7,25.7,0,0,1,95.4,204.9Zm-1.7,13.3a19.5,19.5,0,0,0-8,1.6,18.5,18.5,0,0,0-6.1,4.4,19.7,19.7,0,0,0-4,6.6,24.6,24.6,0,0,0,0,16.5,19.7,19.7,0,0,0,4,6.6,18.5,18.5,0,0,0,6.1,4.4,20.9,20.9,0,0,0,16.1-.1,18.1,18.1,0,0,0,6.1-4.5,19.7,19.7,0,0,0,3.9-6.6,24.6,24.6,0,0,0,0-16.1,19.8,19.8,0,0,0-3.9-6.6,18.1,18.1,0,0,0-6.1-4.5A19.6,19.6,0,0,0,93.7,218.2Z" transform="translate(-60.5 -173.5)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>

这是轮廓动画的css：

This is the css for the animation of the outlines:

@keyframes offset{
    to {
        stroke-dashoffset: 0;   
    }   
}

.b1{
    animation: offset 2s linear forwards;
    stroke-dasharray: 324.774;
    stroke-dashoffset: 324.774; 
}

直到这里一切正常为止。

之后两秒钟完成动画，现在我要填充动画。

这就是我可能要做的事情：

Up until here everything works just fine.
After two seconds the animation is done and now I want to fill it.
This is how I tought I might do it:

@keyframes fill {
    0% {
       fill: white;
       }
    100% {
       fill: black;
       }
      }

      #fill {
          animation-name: fill;
          animation-duration: 2s;
          animation-delay:2s;
      }

问题是我已经有一个 id 和分配给路径
的类我试图更改路径的 id 和 #fill 。

The problem is that I allready have an id and a class assigned to the path
I tried to change the path's id with the #fill.

如果执行此操作，轮廓动画将被覆盖，仅等待两秒钟。两秒钟后，路径将被动画填充。

If I do this the outline animation get's overwritten and it just waits two seconds . After the two seconds the path get's filled by animation.

我该如何进行这项工作？
我想要的是首先对轮廓进行动画处理，完成后必须填充形状。

How can I make this work? What I want is to first animate the outlines and when they are done the shape must be filled.

Thnx。

推荐答案

在动画中，可以具有任意多个关键帧。只需为0％和50％之间的路径设置动画，然后为50％和100％之间的填充动画。

You can have as many keyframes as you like in an animation. Just animate the path between 0% and 50%, and then animate the fill between 50% and 100%.

在这里，您去：

.b1 {
  animation: stroke_fill 4s linear forwards;
  stroke-dasharray: 324.774;
  stroke-dashoffset: 324.774;
}
@keyframes stroke_fill {
  0% {
    fill: white;
  }
  50% {
    fill: white;
    stroke-dashoffset: 0;
  }
  100% {
    fill: black;
    stroke-dashoffset: 0;
  }
}

<svg width="300" height="300" viewBox="0 0 300 300">
  <path id="b1" class="b1" d="M95.4,204.9a31.7,31.7,0,0,1,23,9.6,32.8,32.8,0,0,1,6.9,10.8,38.7,38.7,0,0,1,0,27.4,32.8,32.8,0,0,1-6.9,10.8,31.7,31.7,0,0,1-23,9.6,25.7,25.7,0,0,1-11.9-2.6,25.4,25.4,0,0,1-8.3-6.8v7.7H61V174H75.1v40.3a25.4,25.4,0,0,1,8.3-6.8A25.7,25.7,0,0,1,95.4,204.9Zm-1.7,13.3a19.5,19.5,0,0,0-8,1.6,18.5,18.5,0,0,0-6.1,4.4,19.7,19.7,0,0,0-4,6.6,24.6,24.6,0,0,0,0,16.5,19.7,19.7,0,0,0,4,6.6,18.5,18.5,0,0,0,6.1,4.4,20.9,20.9,0,0,0,16.1-.1,18.1,18.1,0,0,0,6.1-4.5,19.7,19.7,0,0,0,3.9-6.6,24.6,24.6,0,0,0,0-16.1,19.8,19.8,0,0,0-3.9-6.6,18.1,18.1,0,0,0-6.1-4.5A19.6,19.6,0,0,0,93.7,218.2Z"
  transform="translate(-60.5 -173.5)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10" />
</svg>

这篇关于SVG动画。绘制后填充路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！