Question

感谢您阅读此书，我正在尝试输入SVG徽标。我已经成功完成了第一部分的工作，但是让徽标像文字一样动起来。但是，我希望动画完成后，用黑色填充文字。我去过这里的其他线程，但是他们的解决方案对我不起作用。

任何帮助将不胜感激。

非常感谢您的时间和帮助！

我的笔可以在这里找到> https://codepen.io/limtu/pen/gBYepZ?editors=1010

enter code here <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 532.46 217.12">


   <defs>
    <style>.cls-1{
   fill:#fff; stroke:#000;stroke-miterlimit:10;stroke-width:0.25px;
   stroke-dasharray: 5000;
    stroke-dashoffset: 0;
    -webkit-animation: dash 12s linear forwards;
    -moz-animation: dash 12s linear forwards;
    -o-animation: dash 12s linear forwards;
    animation: dash 12s linear forwards;




  }

  @-webkit-keyframes dash {

    from { stroke-dashoffset: 5000;
    }

    to { stroke-dashoffset: 0;
    }


  }

  .cls-1:hover {
    fill: ;
  }




  .cls-2{
  fill:#fff;
 }

.cls-3{

  font-size:42.01px;fill:#020200;
  font-family:ArialMT, Arial;
  letter-spacing:0.21em;
  }

</style>

Answer 1

首先：您正在使用SELECT regexp_replace(first, '[^a-zA-Z0-9]+', '') FROM example where last LIKE '%Belanger%'。这个太大了。在这种情况下，路径长度为2168.6。

为了满足您的需要（我希望这就是您所需要的），我正在使用2个CSS动画：一个用于描边，另一个用于填充。第二个动画以12秒的延迟开始，这是第一个动画结束所需的时间。

PS ：为清楚起见，我删除了前缀。您可以根据需要添加它们。

stroke-dashoffset: 5000;

   .cls-1{
       fill:#fff; stroke:#000;stroke-miterlimit:10;stroke-width:0.25px;
       stroke-dasharray: 2168.6;
       stroke-dashoffset: 0;
       animation: dash 12s linear forwards,changeColor 2s linear 12s  forwards;

      }
      
      @keyframes dash {
        
        from { stroke-dashoffset: 2168.6;
        }
        
        to { stroke-dashoffset: 0;
        }
      }
      
      @keyframes changeColor {   
        from{ fill: rgba(0,0,0,0);}   
        to{ fill: rgba(0,0,0,1)}  
      }
      
      .cls-1:hover {
        fill: ;
      }
    
      .cls-2{
      fill:#fff;
     }
    
    .cls-3{
      
      font-size:42.01px;fill:#020200;
      font-family:ArialMT, Arial;
      letter-spacing:0.21em;
      }

笔画输入后，SVG“填充”问题

1 个答案: