Добрый день уважаемые. Помогите разобраться с параметрами библиотеки (разумеется кто имеет опыт). Есть такой пример.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SVG-Morpheus/0.3.2/svg-morpheus.js"></script>
</head>
<body>
<svg version="1.1" id="Heart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 450 320" style="enable-background:new 0 0 450 320;" xml:space="preserve">
<g id="WingRight">
<path fill="#A2D7DB"; stroke="#12A2AD"; stroke-miterlimit="10"; class="st0" d="M285.2,210.9c61.1,27.2,75.4-37.8,75.4-37.8c49,9.5,42.3-42.4,42.3-42.4
c28.7-4.2,22.9-30.2,18.1-43.1c-1.5-4-6.6-6.8-10.9-6c-45.8,8.2-80.8,34.2-103.2,56.5L285.2,210.9z"/>
</g>
<g id="WingRightMin">
<path class="st1" fill="#A2D7DB"; stroke="#12A2AD"; stroke-miterlimit="10"; d="M285.2,217c4.7,2.1,5.8-2.9,5.8-2.9c3.8,0.7,3.3-3.3,3.3-3.3c2.2-0.3,1.8-2.3,1.4-3.3
c-0.1-0.3-0.5-0.5-0.8-0.5c-3.5,0.6-6.2,2.6-8,4.4L285.2,217z"/>
</g>
<g id="WingLeft">s
<path class="st2" fill="#A2D7DB"; stroke="#12A2AD"; stroke-miterlimit="10"; d="M143.1,136.1c-22.4-22.3-57.4-48.3-103.2-56.5c-4.3-0.7-9.4,2-10.9,6
c-4.8,12.9-10.6,38.9,18.1,43.1c0,0-6.7,51.8,42.3,42.4c0,0,14.3,65,75.4,37.8L143.1,136.1z"/>
</g>
<g id="WingLeftMin">
<path class="st3" fill="#A2D7DB"; stroke="#12A2AD"; stroke-miterlimit="10"; d="M163.4,210.5c-1.4-1.4-3.6-3.1-6.5-3.6c-0.3,0-0.6,0.1-0.7,0.4c-0.3,0.8-0.7,2.5,1.1,2.7
c0,0-0.4,3.3,2.7,2.7c0,0,0.9,4.1,4.8,2.4L163.4,210.5z"/>
</g>
</svg>
<script>
window.onload =function(){
var myHeart = $("#Heart");
var myIcons = new SVGMorpheus('#Heart');
var current = 0;
myHeart.click(function (e) {
if (current++ % 2 == 0) {
myIcons.to( 'WingRight', {duration:500, rotation:'none'});
myIcons.to( 'WingLeft', {duration:500, rotation:'none'});
} else {
myIcons.to('WingRightMin', {duration:500, rotation:'none'});
myIcons.to('WingLeftMin', {duration:500, rotation:'none'});
}
});
}
</script>
</body>
</html>
Мне необходимо по клацанью мышки изменять сразу два элемента path(тоесть сначало крылышки маленькие, а на втором клике большие), а оно не срабатывает. Если менять по одному элементу оно срабатывает, а если сразу несколько, то значения параметров перетираются теми что идут позже. Подскажите пожалуйста как исправить?
