Snap svg动画分组路径

我有以下分组的svg文件，g与一个花瓣的id，然后每个部分里面是花瓣，我似乎无法改变每个内部路径的填充。Snap svg动画分组路径

我将snaps的花瓣变量定义为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>

来源

2016-02-20 DarrenK

不知道它的问题，例如一个错字，但petals.Snap（）似乎很奇怪。你的意思只是Snap（'＃花瓣'）？确保单个路径上没有额外的样式，否则它们将覆盖填充。如果需要进一步帮助，我会在示例中包含您的js Snap代码。顺便说一句mina.easeIn是一个函数被传递，而不是运行，所以给它mina.easeIn不是mina.easeIn（） – Ian

我向该组添加了初始填充颜色，以便您可以看到颜色更改。我将您的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>

来源

2016-02-23 01:16:23

Snap svg动画分组路径

回答

相关问题