从左到右动画 SVG 填充答案

【问题标题】：Animate SVG fill from left to right从左到右动画 SVG 填充
【发布时间】：2017-02-01 19:13:58
【问题描述】：

我有一个想要从左到右平滑填充的 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>

http://codepen.io/anon/pen/GrQPvK

【问题讨论】：

你试过搜索吗？ css-tricks.com/animating-svg-css
创建 SVG 的方式会使这条线的动画变得更加复杂。为什么使用fill 可以很容易地创建它，而使用stroke（也许stroke-width 用于厚度）？
是的，我只是注意到路径不完全正确，无法制作此动画，谢谢
另外，您可以通过 linearGradient 和 SMIL 为停靠点设置动画。

标签： css animation svg

【解决方案1】：

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

很抱歉，我不能使用你的 SVG，因为它是一个形状，为了产生你的效果，你只需要一个没有填充的路径。所以我以这个 SVG 为例（来自这篇文章：https://jakearchibald.com/2013/animated-line-drawing-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>

注意stroke 和stroke-width 属性。这是诀窍的开始；）。然后你需要添加一些 CSS ：

.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;
   }
}

就是这样！

更多信息，你也可以阅读这篇文章：https://css-tricks.com/svg-line-animation-works/

【讨论】：

不客气。很高兴^^。如果您有任何问题，请随时问我。（如果您可以投票/检查答案，那就太好了！）

【解决方案2】：

你可以从这里开始工作。

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：http://codepen.io/anon/pen/egVbMV

【讨论】：

谢谢，但我不希望线条移动，我希望它从左到右平滑填充，同时保持在同一个地方，这就是我使用 svg 的原因。
啊 kk，抱歉误读了这个问题。但我认为你不能用 css 做到这一点。我能想到用css做的唯一方法是将svg放在一个div中，然后在该div中绝对定位另一个div，它与高度和相同的背景颜色#fff相同，但具有z-index像 999。所以它位于 svg 的顶部。然后使用 css 为顶部 div 的宽度设置动画。还将顶部 div 的正确位置设置为 0px，使其保持在右侧。抱歉今天要跳槽，所以想不出代码。希望你能理解我的解释
实际上我可以，但与我想要的方式不完全相同。这是 svg 本身的问题。不过还是谢谢

【解决方案3】：

试试这个

.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;
  }
}

现场演示 - http://codepen.io/anon/pen/MJQLgG

【讨论】：