0
我有SVG path which animates drawing out a word。动画完成后，字母应该开始滴落，就好像文字是用油漆写的。我想出的唯一解决方案就是将其作为gif来完成。动画后操作SVG路径的中点
是否可以在绘制SVG后创建效果来操作路径？
<svg version="1.1" id="Layer_3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-510.061 200.082 424.13 251.322" style="enable-background:new -510.061 200.082 424.13 251.322;" xml:space="preserve" preserveAspectRatio="xMidYMid meet">
<path class="path" fill="#FFFFFF" stroke="url(#g)" stroke-width="14" stroke-miterlimit="4" d="M-452.825,292.283
c-38.797-6.45-55.673,31.665-54.141,39.691c0.623,3.262,1.864,2.683,6.84,2.886c3.018,0.123,12.397-2.326,16.621-5.22
c9.716-6.655,13.538-11.867,13.538-11.867c1.06-1.231,2.76-1.456,4.78-1.316c1.963,0.136,15.194,26.35,15.847,27.428
c12.207,20.147,9.337,62.703,8.847,65.677c-3.361,20.419-33.532,55.715-42.439,29.547c-26.299-77.26,38.171-82.38,44.621-80.93
c13.822,3.106,12.376-10.28,11.743-13.3c-1.432-6.83-2.462-9.788-4.061-13.002c-4.008-8.06-8.904-16.999-8.176-17.467
c0.609-0.391-1.198,9.376,3.546,8.939c5.93-0.547,2.76-11.961,10.312-17.145c8.707-5.976,12.009-7.347,11.635-6.931
c-4.204,4.679-18.594,13.802-19.442,18.848c-1.09,6.479-1.73,27.306,13.344,32.355c6.558,2.197,35.442-58.24,37.348-68.115
c1.724-8.93-0.305-10.748-0.858-11.172c-2.443-1.871-6.648,0.054-7.167,0.292c-7.02,3.215-10.192,8.651-10.74,10.289
c-2.197,6.558-3.699,15.481,1.89,18.896c5.971,3.649,9.229,4.618,15.819-9.204c2.064-4.329,4.088-11.676,4.114-13.368
c0.07-4.595,1.431-4.653,2.944-0.539c8.273,22.494,16.686,19.444,30.462,34.976c5.15,5.807,21.282,23.499,31.24,63.769
c0.928,3.752-6.903,6.553-8.139,2.891c-8.315-24.633-10.271-34.758-15.895-50.381c-15.16-42.111-1.753-13.414-28.475-71.059
c1.661-1.142,6.421-3.193,11.871-4.381c5.702-1.242,14.565-1.38,15.939,5.132c1.989,9.427-12.222,18.347-15.609,28.852
c-6.35,19.69,0.48,32.902,5.927,29.905c34.808-19.149,27.865-13.051,31.663-20.621c1.556-3.102,0.943-9.097,0.931-12.031
c-0.061-14.49-19.911-58.049-21.116-57.597c-1.317,0.494,21.932,65.597,25.712,64.607c2.049-0.537-9.917-16.161-6.63-26.456
c0.884-2.767,1.444-7.339,8.422-7.099c19.793,0.683,20.382,29.092,24.906,34.772c2.265,2.843,9.185-24.448-3.663-60.94
c16.114,37.598,13.059,48.655,12.918,47.193c-3.072-31.917,1.788-49.326,20.006-50.841c9.18-0.764,16.58-1.225,16.58-1.225
s-35.881,3.339-36.249,17.898c-0.16,6.348,6.265,16.546,12.222,17.616c13.478,2.42,31.955-14.112,39.648-39.058
c2.094-6.789,22.84-20.669,23.074-20.388c0.415,0.498-49.858,35.959,7.977,20.739c32.55-8.566,25.661,19.843-8.652,30.146
c-29.735,8.929-31.283,17.326-71.967,30.749c-70.138,23.141-90.571,28.35-126.316,46.254c-40.064,20.067-60.502,35.66-60.502,35.66
s228.985-125.861,373.43-146.017"/>
<linearGradient id="g">
<stop offset="0.10" stop-color="#0ef1ff"/>
<stop offset="0.15" stop-color="#37c8ff"/>
<stop offset="0.20" stop-color="#58a7ff"/>
<stop offset="0.25" stop-color="#7a85ff"/>
<stop offset="0.30" stop-color="#ac53ff"/>
<stop offset="0.35" stop-color="#d22dff"/>
<stop offset="0.40" stop-color="#f20dff"/>
<stop offset="0.45" stop-color="#fe4cb8"/>
<stop offset="0.50" stop-color="#fe7394"/>
<stop offset="0.55" stop-color="#fd9376"/>
<stop offset="0.60" stop-color="#fdb05b"/>
<stop offset="0.65" stop-color="#fccf3e"/>
<stop offset="0.70" stop-color="#faec21"/>
<stop offset="0.75" stop-color="#d4c81c"/>
<stop offset="0.80" stop-color="#a49b15"/>
<stop offset="0.85" stop-color="#7d7610"/>
<stop offset="0.90" stop-color="#57520b"/>
<stop offset="0.95" stop-color="#353207"/>
<stop offset="1" stop-color="#000000"/>
</linearGradient>
</svg>
