CODEWITHSUNDEEP
javascriptsvgsnap.svg
DarrenK
DarrenK

Reputation: 111

Snap svg animate grouped paths

I have the following grouped svg file, g with an id of flower-petals , then each part inside being a petal, I cannot seem to change the fill for each one of the inner paths.

I define the petals variable for snap as petals.Snap("#flower-petals") , then looking at the docs I should be able to just say petals.animate({fill:"#333333",2000,mina.easeIn());

But alas cannot even select one of the path elements .

Any Ideas or resources?

<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>

Upvotes: 0

Views: 98

Answers (1)

Andrew Willems
Andrew Willems

Reputation: 12458

I added an initial fill color to the group so that you can see the color change. I interpreted your petals.Snap(... to be a typo for petals = Snap(.... And, as also pointed out by @Ian in the comments, I removed the () from mina.easeIn(). The code snippet below may or may not work depending on whether your browser allows third party libraries to be accessed from SO...it should work in Firefox or you can copy it and run it on your own computer.

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>

Upvotes: 1

Related Questions