Snap.svg动画

Question

我想用我的vase.svg和plant.svg文件使用snap.svg JS Library创建一个动画。

看看他们的网站： http://snapsvg.io/

http://snapsvg.io/demos/

所以基本上我想要做的是创建一个简单的动画，当我徘徊我的鼠标在vase.svg的plant.svg将有一个平稳增长的效果，就像它从vase.svg文件中弹出一样。

到目前为止，这是我在我的代码：

<!----VASE SVG --> 

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
     width="169.403px" height="122.866px" viewBox="0 0 169.403 122.866" style="enable-background:new 0 0 169.403 122.866;" 
     xml:space="preserve"> 
    <style type="text/css"> 
     .st0{fill:#8C6239;} 
     .st1{display:none;} 
     .st2{fill:#A67C52;} 
    </style> 

    <g id="vase"> 
     <polygon class="st2" points="4.568,11.263 42.754,111.803 131.694,111.803 165.53,11.263 "/> 
     <rect x="4.568" y="11.263" class="st0" width="160.961" height="13.051"/> 
    </g> 
    </svg> 



<!--- PLANT SVG --> 

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="89.75px" 
    height="91.25px" viewBox="0 0 89.75 91.25" style="enable-background:new 0 0 89.75 91.25;" xml:space="preserve"> 
<style type="text/css"> 

    .st0{fill:#F7931E;} 
    .st1{fill:#FCEE21;} 
    .st2{fill:#352A24;} 
    .st3{display:none;} 

</style> 
<g id="Layer_1" class="st3"> 
</g> 
<g id="branch"> 
    <path class="st2" d="M74.292,2.688c0,0,5.277,31.238-44.031,55.489c-17.396,8.554-19.565,21.354-18.091,30.986h6.902 
     c-1.695-8.763-0.34-19.908,13.699-26.744C58.637,49.827,79.567,22.939,74.292,2.688z"/> 
</g> 
<g id="leaves"> 
    <path class="st0" d="M52.671,51.978c0,0,9.323,6.733,18.417,0.235c9.098-6.494,11.716-3.966,11.716-3.966 
     s-18.476-12.426-31.92,2.424L52.671,51.978z"/> 
    <path class="st1" d="M54.686,51.262c0,0,9.139-8.96,21.293-4.055"/> 
    <path class="st0" d="M62.42,32.905c0,0,0.232-9.613-8.555-12.811c-8.784-3.197-8.28-6.201-8.28-6.201s0.177,18.62,16.778,20.862 
     L62.42,32.905z"/> 
    <path class="st1" d="M62.057,34.243c0,0-12.282-3.59-13.95-16.586"/> 
</g> 
</svg> 

检查出的jsfiddle：http://jsfiddle.net/axh9pwet/1/

注：snap.svg-min.js是一个外部的资源，被包括在内。

Answer 1

为此，我不认为你需要任何图书馆。

您也有冲突的CSS类选择器。修复使用图像。

http://jsfiddle.net/axh9pwet/3/

window.onload = function() { 
 
    var pot = document.getElementById("pot"); 
 
    pot.addEventListener("mouseenter", growPlant); 
 
    pot.addEventListener("mouseleave", resetPlant); 
 

 
    var plant = document.getElementById("plant"); 
 
    var plantPos = 100; 
 

 
    var timer = null; 
 

 
    function growPlant(e) { 
 
     clearInterval(timer); 
 
     timer = setInterval(function() { 
 
      if (parseInt(plant.style.top) < 25) { 
 
       clearInterval(timer); 
 
      } else { 
 
       plant.style.top = (--plantPos) + "px"; 
 
      } 
 
     }, 1000/60); 
 
    } 
 

 
    function resetPlant(e) { 
 
     clearInterval(timer); 
 
     timer = setInterval(function() { 
 
      if (parseInt(plant.style.top) > 100) { 
 
       clearInterval(timer); 
 
      } else { 
 
       plant.style.top = (++plantPos) + "px"; 
 
      } 
 
     }, 1000/60); 
 
    } 
 
};

body { 
 
    background: #e4e4e4; 
 
} 
 
svg { 
 
    position: absolute; 
 
    top: 100px; 
 
} 
 
#plant { 
 
    left: 50px; 
 
} 
 
#pot .st0 { 
 
    fill: #8C6239; 
 
} 
 
#pot .st2 { 
 
    fill: #A67C52; 
 
} 
 
#plant .st0 { 
 
    fill: #F7931E; 
 
} 
 
#plant .st1 { 
 
    fill: #FCEE21; 
 
} 
 
#plant .st2 { 
 
    fill: #352A24; 
 
} 
 
#plant .st3 { 
 
    display: none; 
 
}

<svg width="90" height="90" id="plant"> 
 
    <g id="Layer_1" class="st3"></g> 
 
    <g id="branch"> 
 
    <path class="st2" d="M74.292,2.688c0,0,5.277,31.238-44.031,55.489c-17.396,8.554-19.565,21.354-18.091,30.986h6.902 
 
    \t \t c-1.695-8.763-0.34-19.908,13.699-26.744C58.637,49.827,79.567,22.939,74.292,2.688z" /> 
 
    </g> 
 
    <g id="leaves"> 
 
    <path class="st0" d="M52.671,51.978c0,0,9.323,6.733,18.417,0.235c9.098-6.494,11.716-3.966,11.716-3.966 
 
    \t \t s-18.476-12.426-31.92,2.424L52.671,51.978z" /> 
 
    <path class="st1" d="M54.686,51.262c0,0,9.139-8.96,21.293-4.055" /> 
 
    <path class="st0" d="M62.42,32.905c0,0,0.232-9.613-8.555-12.811c-8.784-3.197-8.28-6.201-8.28-6.201s0.177,18.62,16.778,20.862 
 
    \t \t L62.42,32.905z" /> 
 
    <path class="st1" d="M62.057,34.243c0,0-12.282-3.59-13.95-16.586" /> 
 
    </g> 
 
</svg> 
 
<svg width="169" height="123" id="pot"> 
 
    <g id="vase"> 
 
    <polygon class="st2" points="4.568,11.263 42.754,111.803 131.694,111.803 165.53,11.263 \t " /> 
 
    <rect x="4.568" y="11.263" class="st0" width="160.961" height="13.051" /> 
 
    </g> 
 
</svg>