javascript - 捕捉 svg 动画分组路径

Question

我有以下分组的svg文件，g的id为flower-petals，然后里面的每个部分都是花瓣，我似乎无法更改每个内部路径的填充。

我将 snap 的 petals 变量定义为 petals.Snap("#flower-petals") ，然后查看文档我应该可以说 petals.animate({fill:"#333333",2000,mina .easeIn());

但是唉，甚至无法选择路径元素之一。

有什么想法或资源吗？

<g id="flower-petals">
            <path class="light-fill-six" style="mask:url(#id0)" d="M9020 958c204,-23 340,311 297,755 -23,227 -87,437 -173,592 -85,154 -192,252 -298,256 -209,9 -332,-349 -280,-790 52,-430 250,-790 454,-813z"/>
            <path class="light-fill-four" style="mask:url(#id2)" d="M10002 1052c140,49 114,149 70,311 -45,161 -155,368 -318,581 -325,422 -733,695 -908,612 -86,-40 -99,-160 -52,-319 46,-159 153,-359 309,-562 313,-409 760,-673 899,-623z"/>
            <path class="light-fill-six" style="mask:url(#id4)" d="M10761 1593c84,113 -252,503 -802,773 -267,132 -526,218 -727,251 -198,33 -341,15 -385,-61 -88,-149 242,-474 752,-736 260,-134 520,-227 730,-269 214,-43 347,-71 432,42z"/>
            <path class="light-fill-four" style="mask:url(#id6)" d="M11019 2468c-5,98 -143,192 -358,263 -213,70 -501,117 -809,125 -296,8 -555,-23 -735,-77 -179,-54 -283,-133 -273,-223 9,-89 130,-175 319,-242 190,-68 452,-119 744,-135 303,-17 582,7 784,58 206,52 333,133 328,231z"/>
            <path class="light-fill-six" style="mask:url(#id8)" d="M10653 3412c-103,132 -241,115 -461,86 -216,-29 -475,-110 -723,-234 -477,-237 -745,-549 -622,-708 61,-79 208,-109 400,-92 195,17 441,83 689,195 521,234 820,621 717,753z"/>
            <path class="light-fill-four" style="mask:url(#id10)" d="M9756 4100c-161,71 -594,-198 -839,-633 -118,-210 -183,-415 -195,-578 -12,-162 28,-284 125,-333 193,-97 551,146 807,562 133,215 212,436 232,615 19,181 32,295 -130,367z"/>
            <path class="light-fill-six" style="mask:url(#id12)" d="M8657 4307c-110,-4 -195,-109 -246,-272 -51,-163 -67,-384 -39,-624 28,-235 94,-448 179,-602 86,-154 191,-251 296,-256 106,-4 193,88 248,241 55,154 78,372 54,616 -24,249 -92,476 -181,639 -90,163 -201,263 -311,258z"/>
            <path class="light-fill-four" style="mask:url(#id14)" d="M7706 4040c-120,-73 -88,-172 -38,-335 49,-162 157,-362 312,-563 308,-403 695,-667 867,-586 86,42 100,164 53,328 -48,165 -158,373 -318,582 -321,417 -756,648 -876,574z"/>
            <path class="light-fill-six" style="mask:url(#id16)" d="M7136 3417c-52,-112 236,-452 692,-686 232,-120 463,-201 647,-233 188,-33 327,-16 372,58 89,152 -245,478 -735,719 -238,117 -468,192 -644,216 -174,25 -280,38 -332,-74z"/>
            <path class="light-fill-four" style="mask:url(#id18)" d="M7043 2630c26,-164 422,-317 907,-343 508,-29 923,91 904,269 -19,180 -472,338 -986,351 -491,13 -850,-113 -825,-277z"/>
            <path class="light-fill-six" style="mask:url(#id20)" d="M7370 1857c82,-109 180,-103 342,-94 164,9 367,60 571,152 424,190 686,482 563,641 -61,80 -206,108 -388,90 -178,-18 -392,-81 -594,-182 -391,-195 -577,-499 -494,-607z"/>
            <path class="light-fill-four" style="mask:url(#id22)" d="M8078 1251c130,-73 486,98 702,450 112,182 177,370 190,526 12,158 -28,280 -124,329 -190,97 -519,-137 -726,-505 -100,-178 -154,-355 -161,-498 -6,-143 -12,-229 119,-302z"/>
        </g>

Answer 1

我向该组添加了初始填充颜色，以便您可以看到颜色变化。我解释了你的petals.Snap(...是 petals = Snap(... 的拼写错误。而且，正如 @Ian 在评论中指出的那样，我删除了 ()来自mina.easeIn() 。下面的代码片段可能会也可能不会工作，具体取决于您的浏览器是否允许从 SO 访问第三方库...它应该在 Firefox 中工作，或者您可以复制它并在您自己的计算机上运行它。

var petals = Snap("#flower-petals");
petals.animate({fill: "#333333"}, 2000, mina.easeIn);

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<svg width="300" height="250" viewBox="6000 800 6000 5000">
  <g id="flower-petals" fill="#ff0000">
    <path class="light-fill-six" style="mask:url(#id0)" d="M9020 958c204,-23 340,311 297,755 -23,227 -87,437 -173,592 -85,154 -192,252 -298,256 -209,9 -332,-349 -280,-790 52,-430 250,-790 454,-813z" />
    <path class="light-fill-four" style="mask:url(#id2)" d="M10002 1052c140,49 114,149 70,311 -45,161 -155,368 -318,581 -325,422 -733,695 -908,612 -86,-40 -99,-160 -52,-319 46,-159 153,-359 309,-562 313,-409 760,-673 899,-623z" />
    <path class="light-fill-six" style="mask:url(#id4)" d="M10761 1593c84,113 -252,503 -802,773 -267,132 -526,218 -727,251 -198,33 -341,15 -385,-61 -88,-149 242,-474 752,-736 260,-134 520,-227 730,-269 214,-43 347,-71 432,42z" />
    <path class="light-fill-four" style="mask:url(#id6)" d="M11019 2468c-5,98 -143,192 -358,263 -213,70 -501,117 -809,125 -296,8 -555,-23 -735,-77 -179,-54 -283,-133 -273,-223 9,-89 130,-175 319,-242 190,-68 452,-119 744,-135 303,-17 582,7 784,58 206,52 333,133 328,231z"
    />
    <path class="light-fill-six" style="mask:url(#id8)" d="M10653 3412c-103,132 -241,115 -461,86 -216,-29 -475,-110 -723,-234 -477,-237 -745,-549 -622,-708 61,-79 208,-109 400,-92 195,17 441,83 689,195 521,234 820,621 717,753z" />
    <path class="light-fill-four" style="mask:url(#id10)" d="M9756 4100c-161,71 -594,-198 -839,-633 -118,-210 -183,-415 -195,-578 -12,-162 28,-284 125,-333 193,-97 551,146 807,562 133,215 212,436 232,615 19,181 32,295 -130,367z" />
    <path class="light-fill-six" style="mask:url(#id12)" d="M8657 4307c-110,-4 -195,-109 -246,-272 -51,-163 -67,-384 -39,-624 28,-235 94,-448 179,-602 86,-154 191,-251 296,-256 106,-4 193,88 248,241 55,154 78,372 54,616 -24,249 -92,476 -181,639 -90,163 -201,263 -311,258z"
    />
    <path class="light-fill-four" style="mask:url(#id14)" d="M7706 4040c-120,-73 -88,-172 -38,-335 49,-162 157,-362 312,-563 308,-403 695,-667 867,-586 86,42 100,164 53,328 -48,165 -158,373 -318,582 -321,417 -756,648 -876,574z" />
    <path class="light-fill-six" style="mask:url(#id16)" d="M7136 3417c-52,-112 236,-452 692,-686 232,-120 463,-201 647,-233 188,-33 327,-16 372,58 89,152 -245,478 -735,719 -238,117 -468,192 -644,216 -174,25 -280,38 -332,-74z" />
    <path class="light-fill-four" style="mask:url(#id18)" d="M7043 2630c26,-164 422,-317 907,-343 508,-29 923,91 904,269 -19,180 -472,338 -986,351 -491,13 -850,-113 -825,-277z" />
    <path class="light-fill-six" style="mask:url(#id20)" d="M7370 1857c82,-109 180,-103 342,-94 164,9 367,60 571,152 424,190 686,482 563,641 -61,80 -206,108 -388,90 -178,-18 -392,-81 -594,-182 -391,-195 -577,-499 -494,-607z" />
    <path class="light-fill-four" style="mask:url(#id22)" d="M8078 1251c130,-73 486,98 702,450 112,182 177,370 190,526 12,158 -28,280 -124,329 -190,97 -519,-137 -726,-505 -100,-178 -154,-355 -161,-498 -6,-143 -12,-229 119,-302z" />
  </g>
</svg>