SVGとVivus.jsで線が描画された後に塗りつぶしをしたい

やりたいこと

SVGで雲の絵を描画し、Vivus.jsを用いて線の描画が終わった後にその中を塗りつぶしたい

現状

SVGで雲の絵を描写し、線のアニメーションはうまく反映されていますが、そのあとの塗りつぶしがうまく機能していません。
恐らく、JavaScriptのコールバック関数が何らかの原因で機能していないのかと思われます。

HTML
1  <body>
2      <svg
3        id="main-visual"
4        width="1452"
5        height="850"
6        viewBox="0 0 1452 850"
7        fill="none"
8        xmlns="http://www.w3.org/2000/svg"
9      >
10        <path
11            class="Big-cloud"
12            fill-rule="evenodd"
13            clip-rule="evenodd"
14            d="M850.046 78.2185C861.454 75.9751 868.067 73.3095 868.067 70.45C868.067 62.4695 816.564 56 753.033 56C689.502 56 638 62.4695 638 70.45C638 77.7986 681.669 83.866 738.188 84.7808C726.779 87.0242 720.167 89.6897 720.167 92.5493C720.167 100.53 771.669 106.999 835.2 106.999C898.731 106.999 950.233 100.53 950.233 92.5493C950.233 85.2007 906.564 79.1333 850.046 78.2185Z"
15            fill="none"
16          />
17      </svg>
18    <script src="https://cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js"></script>
19    <script src="script.js"></script>
20  </body>
21</html>
22

JS
1new Vivus(
2  'main-visual',
3  {
4    duration: 200,
5    start: 'autostart',
6    type: 'scenario',
7    pathTimingFunction: Vivus.EASE_OUT,
8  },
9  function(obj){
10    obj.el.classList.add('fill');
11  }
12);
13

CSS
1body {
2  text-align: center;
3  width: 100%;
4  background-color: #3c63c1;
5}
6
7path{
8  stroke: black;
9  fill-opacity: 0;
10  transition: fill-opacity 1s;
11}
12
13.fill{
14  fill: white;
15  fill-opacity: 1;
16}

###　参考にしたサイト

https://www.webprofessional.jp/how-to-create-the-invisible-pen-effect-in-svg-using-vivus-js/
https://liginc.co.jp/394561

上記のサイトを参考にいろいろと試してみましたが、自分の力では解決できなかったため、お力添えいただきたいです。
何卒よろしくお願いいたします。

退会済みユーザー

2020/08/05 12:53

obj.elがID指定したSVG要素になるようなので、そこをfillクラスを付けても、path自体はfill属性がnoneに指定されてて変わりません。例えばそこからセレクタでpath要素を指定してあげればいいかも。 obj.el.querySelector('path').classList.add('fill');