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

Posted 2021-03-29

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了中风后输出SVG'填充'问题相关的知识，希望对你有一定的参考价值。

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

答案

第一：你正在使用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以上是关于中风后输出SVG'填充'问题的主要内容，如果未能解决你的问题，请参考以下文章 
 带有中风的角2圆形svg
 svg 剪辑图像并显示中风
 中风 url 在 Edge 和 IE 11 SVG 中不起作用
 SVG 中风动画颜色在 Firefox 中正确渲染，但在 Chrome 中失败
 VueJS：使用反应变量修改 SVG 填充样式
 无法在数组类型 PSShape[] 上调用 disableStyle()