中风动画没有发生

Posted 2023-03-28

【中文标题】中风动画没有发生

【英文标题】：Stroke animation not happening

【发布时间】：2019-05-12 19:17:17

【问题描述】：

我正在玩 CSS3 动画和 dashoffset。

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

经过一些适配，这个stroke 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 属性而失败吗？

【问题讨论】：

尝试帮助并复制文章中的路径.. 有趣的是 svg 示例在“SVG 中的路径”标题下方...

什么意思？

【参考方案1】：

您打算制作动画的路径极其复杂且不适合您的目的。我使用的路径是我认为您需要的近似（不完美）。用于stroke-dasharray 和stroke-dashoffset (177) 的长度在javascript 中使用currency_chart_path.getTotalLength() 计算。否则你的 CSS 动画就可以了。

svgborder: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>

【讨论】：

感谢您的回答。剩下两个问题。我可以使用相同的渐变吗？为什么不使用<use /> 而不是复制路径？

是的，在 SVG 中，您可以将渐变用于笔画。至于另一个问题，我不明白你的意思。我不复制任何路径。

【参考方案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 在他们的示例中所做的那样。

【参考方案3】：

您的路径中似乎缺少 stroke 属性。

试试这个：

http://jsfiddle.net/37nrquxy/