我希望它从左到右绘制.这是因为 fill 属性而失败吗? 解决方案 正如其他答案所暗示的,但没有真正解释,问题是您的路径不是执行笔触动画所需的正确形式.SVG 路径可以有笔触"和填充".笔画"是围绕形状外部绘制的一条线.填充"是形状内部填充的内容.此动画技术作用于形状的笔画.但是你的形状没有中风.它只有一个黑色填充.看似一条线,其实是一条细长的形状,看起来像一条线.要了解我的意思,请将鼠标悬停在下方放大的形状上,以查看添加红色笔划时的效果.svg:hover path {笔画:红色;}<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.60.13-073l-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,12.12.14-0.63,12.14.74.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.432l5.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.16l.21915,6.38l0.68-3.8L590.94,410.83z"/></svg>为了让您的路径正确地设置动画,您需要将您的线条重新创建为一条粗线(例如从左到右),并带有笔划,而不是填充.正如@exaneta 在他们的例子中所做的那样.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/WLvRxZI expect it to draw from left to right.Is this failing because of fill attribute? 解决方案 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. 这篇关于笔画动画没有发生的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!