中风后输出SVG'填充'问题

问题描述 投票:0回答:1

感谢您阅读本文,我正在尝试制作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>

css svg
1个回答
0
投票

第一:你正在使用stroke-dashoffset: 5000;。这个太大了。在这种情况下,路径长度是2168.6。

为了达到你所需要的(我希望这是你需要的)我正在使用2个CSS动画:一个用于笔划,一个用于填充。第二个动画以12秒的延迟开始,这是第一个动画结束所需的时间。

PS:为清楚起见,我删除了前缀。如果需要,您可以添加它们。

   .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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 532.46 217.12">
  
<title>m</title><g id="L_o_n_d_o_n_Image" data-name="L o n d o n Image"><path class="cls-1" d="M523,529.72a8.3,8.3,0,0,1-2-.64,3.14,3.14,0,0,1-1.32-1.5,1.51,1.51,0,0,1,1.12-1.87,19.86,19.86,0,0,1,4.28-1,60.73,60.73,0,0,1,13.73.81,8.83,8.83,0,0,0,4.68-.5c9.88-3.94,17.41-10.67,23.43-19.3,6.15-8.8,11.26-18.2,16.27-27.67,9.18-17.34,18.64-34.51,29.19-51.07,10.33-16.2,23.15-30,39.16-40.63,2.72-1.81,5.61-3.38,8.47-5a11.05,11.05,0,0,1,2.82-1c.33-.08.75.2,1.12.32a4.16,4.16,0,0,1-.6,1.05,3.93,3.93,0,0,1-1.09.73c-13,6.57-22.42,16.76-30.05,28.88-7.1,11.28-13,23.21-18.68,35.23-6.92,14.54-14.31,28.84-23.16,42.33-6.79,10.34-14.66,19.67-24.92,26.79a85.91,85.91,0,0,1-18.85,9.85,2.26,2.26,0,0,0-1,.65c1.34.18,2.68.39,4,.53a96.49,96.49,0,0,0,15.67.6c12.34-.66,22.81-5.24,31-14.53,5.09-5.74,10-11.65,15-17.48a4.81,4.81,0,0,0,.63-.87c4.31-8.34,11.11-14.25,18.84-19.21,7.24-4.66,14.83-8.67,23.19-11a22.12,22.12,0,0,1,9.72-.93c6.67,1.16,9.64,7,6.77,13.19a18.21,18.21,0,0,1-7,7.5A58.53,58.53,0,0,1,647,491c-6.81,1.87-13.72,3.41-20.57,5.12a2.27,2.27,0,0,0-1.3.68c-3.05,4.66-5.82,9.49-6.93,15a20.94,20.94,0,0,0-.34,5.59c.29,4.35,3.14,7.13,7.61,7.76a22.33,22.33,0,0,0,13-2.41c5.78-2.75,10.64-6.76,15.22-11.14,6.58-6.3,12.2-13.42,17.77-20.59q7.79-10,16-19.72a51.2,51.2,0,0,1,7.37-6.64c4-3.14,10.49-1.15,12.05,4.24a22.59,22.59,0,0,1-.67,13.89,65.52,65.52,0,0,1-5.92,12.28,2.46,2.46,0,0,0-.44,1.31c.39-.45.76-.93,1.18-1.35,2.57-2.51,5.17-5,7.73-7.52a5.57,5.57,0,0,0,1.19-1.59c3.18-7,7.19-13.48,13.07-18.58a21,21,0,0,1,4.88-3.2,11.63,11.63,0,0,1,4.4-.88,2.6,2.6,0,0,1,2.86,3.34,11.38,11.38,0,0,1-2,4.24A37.47,37.47,0,0,1,724,478.8c-3.61,2.44-7.29,4.77-11,7.06a5.9,5.9,0,0,0-3,4.05,24.15,24.15,0,0,0-.69,9.26c.91,5.38,4.28,7.51,9.61,6.15a18.36,18.36,0,0,0,8.11-4.71,58.94,58.94,0,0,0,5.56-5.94c4.63-5.83,9.38-11.55,15.25-16.19,6.86-5.42,14-10.35,22.29-13.44a26.62,26.62,0,0,1,9.6-1.82c5.81.06,9.17,3.39,9.36,9.26.19,6.12-1.62,11.74-4.19,17.17a88.72,88.72,0,0,1-8.62,14.09c-.23.32-.46.64-.76,1.08a9.32,9.32,0,0,0,6.34,1.25c4.47-.59,8.16-2.9,11.69-5.5,3.73-2.75,6.65-6.26,9.56-9.86,4.27-5.28,7.22-11.36,10.79-17s7-11.47,10.37-17.26q13.35-22.87,26.6-45.81c.37-.64.65-.9,1.47-.69a22.13,22.13,0,0,0,13-.67c-.49.81-.83,1.37-1.16,1.93q-26.87,45.1-53.68,90.24a152.89,152.89,0,0,0-7.33,14.93,12.83,12.83,0,0,0-.89,5.24,3.78,3.78,0,0,0,5.12,3.87,14.8,14.8,0,0,0,5.32-2.58,79.76,79.76,0,0,0,9.44-8.83c4.92-5.67,9.45-11.67,14.14-17.55a9,9,0,0,0,.83-1.45,46.51,46.51,0,0,1,12.24-14.44A96.63,96.63,0,0,1,876,465.25a28,28,0,0,1,10.65-2c4,.09,6.28,2.27,6.37,6.24a42.07,42.07,0,0,1-.35,4.56l3.27-6.18c.62-1.17,1-2.82,1.95-3.34s2.49.33,3.77.3c3.06-.08,6.13-.32,9.19-.5.27,0,.53-.05,1-.1-1.47,2.45-2.87,4.77-4.26,7.1-6.66,11.14-13.36,22.26-19.93,33.46a51.35,51.35,0,0,0-5.7,12.77,13,13,0,0,0-.39,4c.19,3,2.52,4.7,5.43,3.83a15.44,15.44,0,0,0,4.06-2c4.44-3,8.09-6.89,11.68-10.82a199,199,0,0,0,17.76-22.92c.52-.76,1-1.51,2.08-.75v.48c-.77,1.3-1.43,2.68-2.32,3.89-2,2.81-4.08,5.64-6.32,8.29-5.15,6.07-10.33,12.1-15.66,18a28.79,28.79,0,0,1-8.77,6.59,10.33,10.33,0,0,1-6.64,1c-5.22-1-8-4.53-9.24-9.41s-.09-9.75,1.77-14.39c.14-.36.28-.72.41-1.08a1.46,1.46,0,0,0-.71.58c-3.5,4.52-6.93,9.1-10.52,13.54a35.33,35.33,0,0,1-9.87,9c-6.48,3.65-13.25,2.09-17.49-4a18.52,18.52,0,0,1-3.4-10.57c0-3.13.35-6.26.53-9.19-.06.08-.32.43-.59.76-4,4.85-8,9.8-12.16,14.52a38.27,38.27,0,0,1-11.21,9.1c-5.8,2.92-11.88.71-14.58-5.22-1.48-3.26-1.47-6.67-1-10.12.56-4.58,2.56-8.62,4.84-12.54.31-.54.59-1.09.89-1.63l-.28-.22a15.93,15.93,0,0,1-1.6,1.68c-2.87,2.28-5.66,4.69-8.71,6.71a15.55,15.55,0,0,1-10,2.67,50.19,50.19,0,0,1-5.21-1c-2.93,3.49-5.77,7.12-8.87,10.49a33.91,33.91,0,0,1-13.18,9.36c-7.1,2.6-13.77.66-18.36-5.35-3.81-5-4.74-10.64-3.78-16.69.32-2.06,1-4.08,1.49-6.23-.29.27-.51.5-.74.7-2.21,1.89-4.32,3.93-6.67,5.63a14.66,14.66,0,0,1-9.46,2.86,7.31,7.31,0,0,1-7.1-5.41,17.18,17.18,0,0,1-.34-7.71c.22-1.46.55-2.9.87-4.57-.34.25-.48.33-.59.43-4.21,3.77-8.26,7.73-11.32,12.5-4.88,7.59-9.53,15.33-14.23,23a1.64,1.64,0,0,1-1.71.89c-3.23-.11-6.46-.15-9.69-.17-1,0-2,.13-3.13.22.44-.73.75-1.28,1.08-1.81,6.57-10.73,13.19-21.44,19.72-32.2a140.29,140.29,0,0,0,10.08-18.9,24.13,24.13,0,0,0,1.47-4.91c.51-2.82-1.4-4.33-4.06-3.28a9,9,0,0,0-2.78,1.62,71,71,0,0,0-7.09,7.11c-4.4,5.54-8.44,11.36-12.74,17-6.3,8.22-12.79,16.29-20.47,23.31-4.83,4.41-10,8.41-16.05,11-4.68,2-9.51,2.78-14.5,1.4-7.93-2.2-13.53-9.86-13.56-18.61,0-2.4.31-4.81.47-7.25-.22.27-.48.56-.72.86a140.4,140.4,0,0,1-13,14.29c-6.4,6.06-13.68,10.42-22.45,12.14-9,1.74-17.91,1.35-26.84,0-3.3-.5-6.52-1-9.72.33a6.93,6.93,0,0,1-1.53.32l-5.74,1Zm262.7-47.37a20.89,20.89,0,0,0,1.69-9.79c-.65-6-4-8.61-10-7.67-3.85.6-7,2.67-9.93,5.05-5.52,4.46-10,9.93-14.13,15.6-4.91,6.68-9.34,13.66-12.05,21.57a29.35,29.35,0,0,0-1.83,12c.29,3.49,2.19,5.59,5.65,6.11a16.13,16.13,0,0,0,10-2.1c5.45-2.86,9.67-7.17,13.56-11.82,1.64-1.95,3.15-4,4.75-6-3.45-3.66-4-7.77-2.52-12.25a23.46,23.46,0,0,1,6.77-10.16,11.71,11.71,0,0,1,3.45-2.09C783.36,479.89,784.4,480.32,785.68,482.35ZM842.19,518c0,.48,0,1,0,1.44.24,3.64,2.16,5.76,5.53,6.12a7.9,7.9,0,0,0,4.81-1.18,41.1,41.1,0,0,0,9.55-8.13,202.88,202.88,0,0,0,18.57-23.66c3.6-5.23,7.12-10.55,9.36-16.54a19.32,19.32,0,0,0,1.25-6.27c.06-3.25-1.85-4.89-5.1-4.83-3.53,0-6.57,1.55-9.45,3.41a63.7,63.7,0,0,0-12.38,10.91c-6.88,7.56-13.28,15.48-18,24.6C844,508.32,842.29,512.94,842.19,518ZM626.4,494.35a2.51,2.51,0,0,0,.56,0c9.58-2.56,18.73-6.15,27-11.76a33.12,33.12,0,0,0,9-8.22,10.44,10.44,0,0,0,2.16-6c0-2.41-1.17-3.63-3.57-3.7a9.31,9.31,0,0,0-1.67.11,21.19,21.19,0,0,0-8.78,3.91,89.92,89.92,0,0,0-18.72,17.93C630.31,489.14,628.42,491.71,626.4,494.35Z" transform="translate(-390.24 -364.21)"/><path class="cls-1" id="gabi" d="M773.39,450.1c.42,1.61.7,3,1.16,4.33.31.89.17,1.25-.76,1.38-10,1.39-19.71.47-28.61-4.84a18.07,18.07,0,0,1-6.77-6.81,11.56,11.56,0,0,1-.58-10.38c1.55-3.78,1-5.56-2.43-7.78a17.33,17.33,0,0,0-16.67-1.65,6.26,6.26,0,0,0-1,.5c-2.51,1.51-2.65,3.62-.35,5.47a8.15,8.15,0,0,0,5.51,1.65c.37,0,.75,0,1.12-.07l.24.33a15.71,15.71,0,0,1-1.66,2,7.77,7.77,0,0,1-8.58,1.54,7.91,7.91,0,0,1-5.14-7.32c-.27-4.48,2.28-7.22,5.89-9.19a2.3,2.3,0,0,0,1.35-2c1.52-12.8-2.76-23.24-12.72-31.38-7.87-6.43-17-9.36-27-9.55-13.12-.24-25,3.89-36.14,10.44-8.46,5-16,11.16-23.14,17.79-12.26,11.31-22.61,24.26-32.68,37.46-9.18,12-18.31,24.05-27.6,36A269.36,269.36,0,0,1,535,502.79c-6.5,6.52-13.3,12.72-21.21,17.54a69,69,0,0,1-14.48,6.83,4.76,4.76,0,0,1-1.52.33,3.65,3.65,0,0,1-1.13-.37,3.56,3.56,0,0,1,.57-.93c1.94-1.6,4-3.08,5.86-4.77a56,56,0,0,0,14.55-21.16c4.26-10.76,8.3-21.61,12.2-32.51,4.71-13.19,9-26.54,13.8-39.69a143.32,143.32,0,0,1,17.31-34c2.47-3.48,5.39-6.63,8.09-9.94.28-.34.53-.7.8-1.05l-.27-.34a10.12,10.12,0,0,0-2.08,1.21c-3,2.86-6,5.61-8.73,8.7-9.84,11.31-17.71,24-25,37-6.11,10.85-11.9,21.89-18,32.78-5.41,9.71-11.17,19.22-18.23,27.85-12.43,15.16-27.42,27-45.76,34.26a67.89,67.89,0,0,1-35.89,4.19,36.29,36.29,0,0,1-19.18-8.62c-6.14-5.5-8.18-14.82-4.56-21.64,2.39-4.51,6.13-6.81,11.35-6.44a6,6,0,0,1,6,5.42c.88,5-1.93,9.72-6.39,10.75-4.27,1-7.09-1.21-7.19-5.58a6.08,6.08,0,0,0-.18-1.66c-.11-.36-.46-.9-.72-.91a1.24,1.24,0,0,0-1,.69,14.34,14.34,0,0,0-.72,3c-.79,7.82,2.68,13.47,9.1,17.58,5.63,3.61,11.89,5.19,18.46,5.74,16.07,1.35,30.2-3.84,43.19-12.86,9.56-6.63,17.6-14.9,25.26-23.6,9.6-10.92,17.43-23.07,25-35.42,7.91-12.92,15.7-25.91,23.71-38.75a161,161,0,0,1,23.28-29.2,87.27,87.27,0,0,1,8.5-7.19,17.11,17.11,0,0,1,4.44-2c.38-.15.94.17,1.42.27a5.07,5.07,0,0,1-.48,1.39c-.7,1-1.54,1.84-2.24,2.81a74.06,74.06,0,0,0-10.36,20.71c-3.14,9.51-5.9,19.15-8.68,28.77-4.68,16.23-9.6,32.38-16.1,48-4.23,10.17-9.43,19.76-16.65,28.15a73.25,73.25,0,0,1-16.61,14.4c-.27.16-.52.36-.77.54a2.19,2.19,0,0,0-.06.39,7,7,0,0,0,1.78-.37c1.78-.9,3.58-1.79,5.26-2.85a127.66,127.66,0,0,0,33.74-31.17c12-15.91,23.93-31.92,35.86-47.9,7.9-10.58,15.79-21.16,24.6-31,10.41-11.61,22.18-21.56,36-28.94a71.32,71.32,0,0,1,31-8.75c9.22-.38,18.15.88,26.29,5.51,11.17,6.34,18.22,15.67,19.69,28.65.39,3.42,0,6.93,0,10.4,0,.32-.06.63-.07.75,2.52.32,5,.44,7.44,1A31.69,31.69,0,0,1,736.42,424c2.52,1.75,5.12,3.4,7.69,5.07a3.55,3.55,0,0,1,1.58,2.14c1.33,4.66,3.24,9,6.87,12.44a19.38,19.38,0,0,0,9.14,5,5.9,5.9,0,0,0,1.71-.12l.06-.37c-.39-.44-.77-.88-1.16-1.31a29.82,29.82,0,0,1-6.85-13c-.22-.87-.16-1.19.89-.94,4.41,1.05,8.84,2,13.27,3a3.33,3.33,0,0,1,2.61,1.95c2.22,4.61,6.18,7,11,8a3,3,0,0,0,1-.13,3.59,3.59,0,0,0-.19-1.11,5.81,5.81,0,0,0-.75-.92c-1.23-1.57-2.47-3.13-3.65-4.73a7.63,7.63,0,0,1-.62-1.58c1.1.09,2,.19,2.83.24,6.74.36,13.48.73,20.23,1,.38,0,.79-.41,1.19-.64-.39-.23-.76-.62-1.17-.68-4.19-.61-8.4-1.05-12.57-1.76a110.83,110.83,0,0,1-24.75-6.76c-.47-.2-.94-.42-1.54-.69,1.52-4.59,3.39-8.86,7.76-11.32,1.25-.71,2.89-.72,4.33-1.12a5.71,5.71,0,0,0,1.26-.76c-.4-.3-.8-.86-1.22-.87a20.8,20.8,0,0,0-8.77,1.6c-3.73,1.58-7.15,3.58-9.22,7.28a1.33,1.33,0,0,1-.14.19c-1.29,1.81-1.32,1.82-3.35,1l-3.31-1.39c-1.53-.65-1.64-.9-1.15-2.52a13.54,13.54,0,0,1,4.22-6.42,18.92,18.92,0,0,1,9-4c7.54-1.48,15-1.35,22.31,1.32a41.66,41.66,0,0,1,4.06,2c-.59.45-.87.7-1.19.9-5.51,3.33-4.45,11.28.71,13.77a35.71,35.71,0,0,0,9.54,2.92,57.22,57.22,0,0,0,14.9.78,36.62,36.62,0,0,0,19.62-7.51,38.8,38.8,0,0,0,3.82-3.43c3.1-3.16,2.9-9.23,1.1-12.5-1.36-2.46-3.25-2.58-5-.35a4.25,4.25,0,0,1-6.11.83,4.1,4.1,0,0,1-.58-6.06,9.19,9.19,0,0,1,15.06.34c4.25,5.92,4.5,16.37-2.8,22.49a42.23,42.23,0,0,1-18.56,9,2.06,2.06,0,0,0-1.82,1.53c-1,3.07-3.34,5.12-5.9,6.88-5.5,3.77-11.71,5.75-18.19,7a58.56,58.56,0,0,1-17.43.7C775.44,450.42,774.61,450.28,773.39,450.1Z" transform="translate(-390.24 -364.21)"/><path class="cls-1" d="M418.29,429.53a53.64,53.64,0,0,1,10.62-31c9.62-13.21,21.83-23.27,37-29.47a64.23,64.23,0,0,1,26.85-4.62,26.18,26.18,0,0,1,10.77,2.54c8.09,4,11.31,11.54,10.61,19.79-.52,6.1-3.09,11.61-5.5,17.14a78.93,78.93,0,0,0-3.73,9.31c-1,3.33-.56,6.68,2.36,9.08,2.27,1.87,5.07,2,7.87,1.74,3.69-.41,6.81-2.2,9.75-4.32a41.3,41.3,0,0,0,12.12-13.73c.15-.28.26-.65.5-.8a1.91,1.91,0,0,1,1.23-.39c.22.05.46.71.43,1.07a3.69,3.69,0,0,1-.52,1.58c-4.62,7.28-10.05,13.83-18.12,17.45-5.83,2.61-11.51,2.07-16.38-2.43-4.12-3.81-5.47-8.71-4.86-14.18.52-4.68,2.39-8.91,4.38-13.11a121.3,121.3,0,0,0,4.89-11.31c2.47-7,0-12.28-6.8-15.31a27.11,27.11,0,0,0-10.61-2.18c-15.65-.3-29.34,5.14-41.62,14.49-8.36,6.37-15.71,13.73-21.27,22.72a49.17,49.17,0,0,0-7.77,27.62c.3,11.58,7.39,21.25,18,24.26,7,2,13.89,1.23,20.61-1.18a51.06,51.06,0,0,0,24.59-18.18c.29-.4.92-.56,1.39-.83.09.61.47,1.4.22,1.81a22,22,0,0,1-2.89,3.93c-6.26,6.47-13.25,11.93-21.86,15-7.22,2.55-14.64,3.45-22.16,1.64a25.92,25.92,0,0,1-19.59-22.08C418.57,433.52,418.46,431.52,418.29,429.53Z" transform="translate(-390.24 -364.21)"/><path class="cls-2" d="M785.68,482.35c-1.28-2-2.32-2.46-4.55-1.58a11.71,11.71,0,0,0-3.45,2.09A23.46,23.46,0,0,0,770.91,493c-1.51,4.48-.93,8.59,2.52,12.25-1.6,2-3.11,4.08-4.75,6-3.89,4.65-8.11,9-13.56,11.82a16.13,16.13,0,0,1-10,2.1c-3.46-.52-5.36-2.62-5.65-6.11a29.35,29.35,0,0,1,1.83-12c2.71-7.91,7.14-14.89,12.05-21.57,4.18-5.67,8.61-11.14,14.13-15.6,2.95-2.38,6.08-4.45,9.93-5.05,6-.94,9.34,1.67,10,7.67A20.89,20.89,0,0,1,785.68,482.35Z" transform="translate(-390.24 -364.21)"/><path class="cls-2" d="M842.19,518c.1-5.08,1.83-9.7,4.13-14.13,4.73-9.12,11.13-17,18-24.6a63.7,63.7,0,0,1,12.38-10.91c2.88-1.86,5.92-3.36,9.45-3.41,3.25-.06,5.16,1.58,5.1,4.83a19.32,19.32,0,0,1-1.25,6.27c-2.24,6-5.76,11.31-9.36,16.54a202.88,202.88,0,0,1-18.57,23.66,41.1,41.1,0,0,1-9.55,8.13,7.9,7.9,0,0,1-4.81,1.18c-3.37-.36-5.29-2.48-5.53-6.12C842.16,519,842.19,518.5,842.19,518Z" transform="translate(-390.24 -364.21)"/></g><g id="LONDON"><text class="cls-3" transform="translate(153.11 203.48)">LONDON</text></g></svg>

  <script> 

  </script>
© www.soinside.com 2019 - 2024. All rights reserved.