javascript - 使用 anime.js 对 SVG 进行动画填充(或者我必须将填充更改为其他内容吗？)

Question

我有一个 SVG，我正在使用 anime.js 制作动画:

$(function() {

  var lineDrawing = anime({
    targets: '#layer1 path',
    strokeDashoffset: [anime.setDashoffset, 0],
    easing: 'easeInOutSine',
    duration: 1500,
    delay: function(el, i) {
      return i * 250
    },
    direction: 'alternate',
    loop: true
  });

});

我的 SVG 如下:

<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 195.22488 193.54251" version="1.1" id="svg8" inkscape:version="0.92.1 r15371" sodipodi:docname="star.svg">
        <defs
            id="defs2" />
        <sodipodi:namedview
            id="base"
            pagecolor="#ffffff"
            bordercolor="#666666"
            borderopacity="1.0"
            inkscape:pageopacity="0.0"
            inkscape:pageshadow="2"
            inkscape:zoom="0.35"
            inkscape:cx="-99.713793"
            inkscape:cy="369.29872"
            inkscape:document-units="mm"
            inkscape:current-layer="layer1"
            showgrid="false"
            inkscape:snap-to-guides="true"
            inkscape:window-width="1366"
            inkscape:window-height="705"
            inkscape:window-x="-8"
            inkscape:window-y="-8"
            inkscape:window-maximized="1"
            fit-margin-top="0"
            fit-margin-left="0"
            fit-margin-right="0"
            fit-margin-bottom="0" />
        <metadata
            id="metadata5">
            <rdf:RDF>
            <cc:Work
                rdf:about="">
                <dc:format>image/svg+xml</dc:format>
                <dc:type
                    rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
                <dc:title></dc:title>
            </cc:Work>
            </rdf:RDF>
        </metadata>
            <g
                inkscape:label="Layer 1"
                inkscape:groupmode="layer"
                id="layer1"
                transform="translate(-9.3736792,-53.001107)"
                fill="none" 
                fill-rule="evenodd" 
                stroke="currentColor" 
                stroke-width="5"
                >
                <path
                    sodipodi:type="star"
                    style="fill:#d4ff2a"
                    id="path10"
                    sodipodi:sides="5"
                    sodipodi:cx="111.125"
                    sodipodi:cy="155.6369"
                    sodipodi:r1="97.857147"
                    sodipodi:r2="48.928574"
                    sodipodi:arg1="0.81271377"
                    sodipodi:arg2="1.4410323"
                    inkscape:flatsided="false"
                    inkscape:rounded="0"
                    inkscape:randomized="0"
                    d="m 178.40476,226.69642 -60.94839,-22.54231 -53.122401,37.42824 2.604927,-64.93132 -52.012102,-38.95644 62.558327,-17.58745 20.977149,-61.504647 36.05825,54.061687 64.97669,0.94447 -40.27311,50.99941 z"
                    inkscape:transform-center-x="3.9129994"
                    inkscape:transform-center-y="-5.5444732" />
            </g>
        </svg>

FIDDLE HERE ，我浏览了文档并且有关于如何为 SVG 的笔触设置动画的示例，但我真正想做的是为 SVG 的填充设置动画，即 I.E.从下到上动画填充。我该怎么做呢 ？

我已经完成了 doc's但我没有看到太多线索。

编辑:- 为了简化我的问题，我究竟需要如何修改我的 SVG 以使填充动画化(或者我可能必须将填充修改为其他东西)从向下移动到向上 ？

Answer 1

您可以添加 <linear gradient>并为其 <stop> 制作动画s(没有图书馆)，检查animate svg gradients了解更多详情。

$(function() {

  var lineDrawing = anime({
    targets: '#layer1 path',
    strokeDashoffset: [anime.setDashoffset, 0],
    easing: 'easeInOutSine',
    duration: 1500,
    delay: function(el, i) {
      return i * 250
    },
    direction: 'alternate',
    loop: true
  });

});

.svg__holder {
  max-width: 300px;
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="layer1" width="100%" height="100%" viewBox='0 0 850 800'> 

  <defs>
    <linearGradient id="bottom-to-top" y1="100%" x2="0%" y2="0%">
      <stop offset="0" stop-color="rgb(212, 255, 42)">
        <animate dur="5s" attributeName="offset" fill="freeze" from="0" to="1" />
      </stop>
      <stop offset="0" stop-color="#fff">
        <animate dur="5s" attributeName="offset" fill="freeze" from="0" to="1" />
      </stop>
      
    </linearGradient>
  </defs>
 
  <path class="path" stroke="#000000" fill="url(#bottom-to-top)" stroke-width="3" opacity="1"  d="m 178.40476,226.69642 -60.94839,-22.54231 -53.122401,37.42824 2.604927,-64.93132 -52.012102,-38.95644 62.558327,-17.58745 20.977149,-61.504647 36.05825,54.061687 64.97669,0.94447 -40.27311,50.99941 z" id="svg_1" />
</svg>