Stroke animation not happening

问题

I am playing with CSS3 animation and dashoffset.

This is the tutorial I have been following: https://jakearchibald.com/2013/animated-line-drawing-svg/

After some adaptation, this stroke dashoffset animation is still not working :

@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

I expect it to draw from left to right.

Is this failing because of fill attribute?

回答1:

As other answers have hinted, but not really explained, the problem is that your path is not in the correct form required to do stroke animation.

SVG paths can have "strokes" and "fills". The "stroke" is a line drawn around the outside of a shape. The "fill" is what the inside of the shape is filled with.

This animation technique operates on the stroke of a shape. But your shape doesn't have a stroke. It just has a black fill. What appears to be a line, is actually a long thin shape that looks like a line.

To see what I mean, hover over your zoomed in shape below to see what it looks like when we add a red stroke.

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>

To get your path to animate properly, you need to recreate your line as a single thick line (eg. from left to right) with a stroke, but not a fill. As @exaneta has done in their example.

回答2:

The path you intend to animate is extremely complicate and inappropriate for your purpose. The path I'm using is an approximation (not perfect) of what I suppose you need. The length used for stroke-dasharray and stroke-dashoffset (177) is calculated in javascript with currency_chart_path.getTotalLength(). Otherwise your CSS animation is OK.

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>