從左到右動畫SVG填充

我有這個SVG，我想順利地從左到右填充。我怎樣才能使用CSS？從左到右動畫SVG填充

我不希望線路移動，我希望它從左到右順暢地填充，同時留在同一個地方，這就是爲什麼我使用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

來源

2017-02-01 followthemadhat

有你甚至試圖尋找？ https://css-tricks.com/animating-svg-css/ – Justinas

創建SVG的方式會讓這條線變得更加複雜。你爲什麼用'fill'完成它，當它可以很容易地創建'stroke'（也許''stroke-width'的厚度）？ – Harry

是的，我只是注意到路徑並不完全正確，使這個動畫成爲可能，謝謝 – followthemadhat

可以確實與筆觸屬性做到這一點的CSS。

對不起，我不能使用你的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/

來源

2017-02-01 11:13:58

非常感謝，這真的很有幫助 – followthemadhat

不客氣。這是一種樂趣^^。如果您有任何問題，請隨時問我。（如果你可以upvote /檢查答案，這將是偉大的thx！） –

你可以從你這方面的工作。

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

來源

2017-02-01 07:21:02

謝謝，但我不希望線路移動，我希望它從左到右順暢地填充，同時留在同一個地方，這就是爲什麼我使用svg。 – followthemadhat

Ahh kk，很抱歉誤讀了這個問題。但我認爲你不能用CSS來做到這一點。我能想到用CSS做的唯一方法就是將svg放在div中然後再有另一個div在那個div裏面，它和高度和背景顏色相同#fff，但是有一個z像999的索引。所以它坐在svg的頂部。然後使用CSS來設置頂部div的寬度。也設置頂部的div的正確位置爲0px，所以它堅持正確的。對不起一天要跳，所以不能拿出代碼。希望你明白我的解釋 –

其實我可以但不完全一樣我想要的方式。這是svg本身的問題。但無論如何謝謝 – followthemadhat

試試這個

.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

來源

2017-02-01 07:45:18 grinmax

@followthemadhat也許這樣http://codepen.io/anon/pen/dNdrpz – grinmax

從左到右動畫SVG填充

回答

相關問題