Question

我正在使用CSS3动画和dashoffset。

这是我一直关注的教程：https://jakearchibald.com/2013/animated-line-drawing-svg/

经过一些调整后，此笔划dashoffset动画仍然不起作用：

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
#currency-chart-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

<svg id="city-total-v2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<g id="Chartline"><g><linearGradient id="SVGID_497_" gradientUnits="userSpaceOnUse" x1="441.5522" y1="423.498" x2="606.2432" y2="423.498"><stop offset="0" style="stop-color: rgb(7, 0, 44);"></stop><stop offset="1" style="stop-color: rgb(124, 10, 103);"></stop></linearGradient><path id="currency-chart-path" fill="url(#SVGID_497_)" d="M590.94,410.83c-0.27-0.11-0.56-0.16-0.85-0.14l-18.37,1.11l-18.77-5.92 c-0.64-0.2-1.33-0.06-1.83,0.37l-18.61,15.82l-21.47-8.61c-0.36-0.15-0.76-0.18-1.15-0.09l-23.31,5.27 c-0.23,0.05-0.44,0.14-0.63,0.27l-21.47,14.11l-21.42,4.45c-1.03,0.21-1.69,1.21-1.47,2.23s1.23,1.67,2.26,1.45l21.78-4.52 c0.24-0.05,0.46-0.14,0.67-0.28l21.49-14.13l22.38-5.07l21.99,8.82c0.66,0.27,1.43,0.14,1.97-0.32l18.68-15.89l18.09,5.71 c0.23,0.07,0.46,0.1,0.7,0.09l18.29-1.1l15.67,6.38l0.68-3.8L590.94,410.83z"></path><linearGradient id="SVGID_498_" gradientUnits="userSpaceOnUse" x1="609.0869" y1="418.3574" x2="609.1055" y2="418.3574"><stop offset="0" style="stop-color: rgb(7, 0, 44);"></stop><stop offset="1" style="stop-color: rgb(124, 10, 103);"></stop></linearGradient><polygon fill="url(#SVGID_498_)" points="609.11,418.37 609.09,418.35 609.09,418.35  "></polygon></g></g>
</svg>

Codepen：https://codepen.io/kopax/pen/WLvRxZ

我希望它从左到右绘制。

是否由于fill属性而失败？

Answer 1

您要设置动画的路径非常复杂，不适合您的目的。我使用的路径是我认为您需要的近似值（em完美）。 stroke-dasharray和stroke-dashoffset（177）的长度是在JavaScript中使用currency_chart_path.getTotalLength()来计算的。否则，您的CSS动画就可以了。

svg{border:1px solid}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
#currency_chart_path {
  stroke-dasharray: 177px;
  stroke-dashoffset: 177px;
  animation: dash 5s linear forwards;
}

<svg id="city-total-v2" viewBox="400 370 270 120">
<g id="Chartline">
  <path id="currency_chart_path" stroke="black" fill="none" d="M443,439 L464,435 487,421 511,416 532,424 552,408 572,414 591,413 606,419" />
  
  <path id="your_path" stroke="#d9d9d9" fill="none" d="M590.94,410.83c-0.27-0.11-0.56-0.16-0.85-0.14l-18.37,1.11l-18.77-5.92 c-0.64-0.2-1.33-0.06-1.83,0.37l-18.61,15.82l-21.47-8.61c-0.36-0.15-0.76-0.18-1.15-0.09l-23.31,5.27 c-0.23,0.05-0.44,0.14-0.63,0.27l-21.47,14.11l-21.42,4.45c-1.03,0.21-1.69,1.21-1.47,2.23s1.23,1.67,2.26,1.45l21.78-4.52 c0.24-0.05,0.46-0.14,0.67-0.28l21.49-14.13l22.38-5.07l21.99,8.82c0.66,0.27,1.43,0.14,1.97-0.32l18.68-15.89l18.09,5.71 c0.23,0.07,0.46,0.1,0.7,0.09l18.29-1.1l15.67,6.38l0.68-3.8L590.94,410.83z"/>
  </g>
</svg>

Answer 2

正如其他答案所暗示的，但并未真正解释，问题在于您的路径格式不正确，无法进行笔画动画。

SVG路径可以具有“笔触”和“填充”。 “笔划”是围绕形状外部绘制的线。 “填充”是填充形状的内部。

此动画技术在形状的笔划上起作用。但是您的形状没有中风。它只有一个黑色填充。看起来像一条线，实际上是看起来像一条线的细长形状。

要了解我的意思，请将鼠标悬停在下面的放大形状上，以查看添加红色笔触时的外观。

svg:hover path {
  stroke: red;
}

<svg viewBox="438 402 170 40">
  <path fill="black" d="M590.94,410.83c-0.27-0.11-0.56-0.16-0.85-0.14l-18.37,1.11l-18.77-5.92 c-0.64-0.2-1.33-0.06-1.83,0.37l-18.61,15.82l-21.47-8.61c-0.36-0.15-0.76-0.18-1.15-0.09l-23.31,5.27 c-0.23,0.05-0.44,0.14-0.63,0.27l-21.47,14.11l-21.42,4.45c-1.03,0.21-1.69,1.21-1.47,2.23s1.23,1.67,2.26,1.45l21.78-4.52 c0.24-0.05,0.46-0.14,0.67-0.28l21.49-14.13l22.38-5.07l21.99,8.82c0.66,0.27,1.43,0.14,1.97-0.32l18.68-15.89l18.09,5.71 c0.23,0.07,0.46,0.1,0.7,0.09l18.29-1.1l15.67,6.38l0.68-3.8L590.94,410.83z"/>
</svg>

要获得正确设置动画的路径，您需要将描边（而不是填充）重新创建为一条粗线（例如，从左到右）。就像@exaneta在他们的示例中所做的那样。

Answer 3

好像您在路径上缺少stroke属性。

尝试一下：

http://jsfiddle.net/37nrquxy/

中风动画没有发生

3 个答案: