Css 从左到右设置SVG填充动画

我有一个SVG，我想从左到右平滑地填充它。如何使用CSS实现这一点

我不希望线条移动，我希望它在保持不变的情况下从左到右平滑填充，这就是我使用svg的原因

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="324" height="25" viewBox="0 0 324 25">
<g id="btn_underline">
<path id="V" d="M88.029,0.613 C58.722,-0.156 29.992,3.400 1.839,11.183 C-1.140,12.047 0.205,16.660 3.184,15.795 C28.262,8.781 54.014,5.321 80.438,5.321 C83.801,5.321 86.203,5.321 87.836,5.417 C96.196,5.610 105.324,6.282 115.413,7.339 C125.503,8.396 133.958,9.453 140.588,10.510 C147.218,11.471 156.346,12.912 167.781,14.834 C182.098,17.236 194.397,19.158 204.582,20.599 C223.511,23.194 240.519,24.443 255.412,24.443 C259.256,24.443 262.138,24.443 264.060,24.347 C274.726,23.962 284.623,23.001 293.655,21.368 C303.936,19.542 313.449,17.044 322.385,13.873 C323.634,13.489 324.307,12.047 323.826,10.798 C323.250,9.357 322.193,8.877 320.751,9.357 C311.815,12.624 302.495,15.026 292.790,16.660 C283.758,18.197 274.149,19.158 263.868,19.542 C246.668,20.023 227.066,18.774 205.159,15.795 C195.742,14.546 183.539,12.624 168.549,10.126 C156.635,8.108 147.506,6.667 141.069,5.706 C134.631,4.745 126.271,3.688 115.990,2.631 C105.709,1.478 96.388,0.805 88.029,0.613 z" fill="#00363B" />
</g>
</svg>

---

你可以从这个开始工作

svg {
  left: -400px;
  position:absolute;
}

@keyframes example {
    from {left: -400px;}
    to {left: 200px;}
}

@-webkit-keyframes example {
    from {left: -400px;}
    to {left: 200px;}
}

svg {
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

ccodepen:

试试这个

.fadeIn {
  animation-name: fade-in-left;
  animation-duration: 1s;
}

@keyframes fade-in-left {
  0% {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

---

实时演示-

您确实可以使用stroke属性在CSS中实现这一点

我很抱歉，我不能使用你的SVG，因为它是一个形状，为了使你的效果，你只需要一个没有填充的路径。因此，我以这个SVG为例（来自本文：）：

就这样

---

有关更多信息，您也可以阅读本文：

您是否尝试过搜索？SVG的创建方式将使这条线的动画制作更加复杂。为什么你要用

填充

来做这件事，而它本可以用

笔划

轻松创建（可能还有

笔划宽度

的厚度）？是的，我只是注意到路径不完全正确，无法使这部动画成为可能，谢谢你可以通过线性半径和SMIL动画来完成。谢谢，但我不希望线条移动，我希望它在保持不变的情况下从左到右平滑填充，这就是我使用svg的原因。啊，kk，对不起，误读了这个问题。但我不认为你能用css做到这一点。我能想到的使用css的唯一方法是将svg放在一个div中，然后在该div中绝对放置另一个div，它与和高度相同，背景颜色相同#fff，但z索引类似999。所以它位于svg的顶部。然后使用css设置顶部div宽度的动画。同时将顶部div的右侧位置设置为0px，使其保持右侧。对不起，今天我得走了，所以我想不出密码。希望你能理解我的解释，虽然我能理解，但不是完全按照我想要的方式。这就是svg本身的问题。不过谢谢你，不客气。很荣幸。如果你有问题尽管问我。（如果你能投票/检查答案，那就太棒了！）

<svg xmlns="http://www.w3.org/2000/svg" height="98" width="581" viewBox="0 0 581 98">
   <path 
      class="path" 
      d="M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215 28.8 5-16.7-7-49.1-34-44-34 11.5-31 46.5-14 69.3 9.38 12.6 24.2 20.6 39.8 22.9 91.4 9.05 102-98.9 176-86.7 18.8 3.81 33 17.3 36.7 34.6 2.01 10.2.124 21.1-5.18 30.1" 
      stroke="#000" 
      stroke-width="4.3" 
      fill="none">
   </path>
</svg>

.path {
   //we divide the line in multiple dashes (some full and other empty)
   //these dashes have 1000px in length
   //so there are one dash full of 1000px of length and then one dash empty of 1000px of length and so on and so forth
   stroke-dasharray: 1000;

   //we change the position of the dashes
   stroke-dashoffset: 1000;

   //now we animate the dashoffset
   //we reduce the offset of each dash so we have the impression that the dashes are moving
   animation: dash 5s linear forwards;
}

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