svg morphing without flipping

Question

Я пытался найти простой и бесплатный способ сделать морфинг между формой безье и зеркальной копией. Поскольку у них одинаковое количество очков, я думал, что это будет непростая задача. Это не так. Я попробовал KUTE и SVG morpheus. Куте выполнял ненужный вертикальный флип, а Морфеус - ненужный горизонтальный (codepen here). Единственной библиотекой javascript, которая сделала трюк, был платный плагин MorphSVG. (codepen here) Жаль, и я надеюсь, что смогу найти более дешевое решение в будущем. Если кто-нибудь знает что-нибудь, пожалуйста, дайте мне знать.

var svgMorpheus = new SVGMorpheus('#icon', {rotation: "none"}); 
var icons = ['question', 'answer']; 
var current = 0; 

Answer 1

Быстрый взлом на основе моей старой анимации: http://jsfiddle.net/alkhoo/JwkYm/11/ - мышь над активировать анимацию.

Примечание: анимированная анимация содержит значение paths.

$(function() { 
 

 
    //Grab an array of all the main SVG Elements 
 
    var containers = $(".category .item a"); 
 

 
    //Define some vars that we will use later 
 
    var speed = 1000; 
 
    var animation = mina.backout; 
 

 
    //Loop through all of these containers and insert the SVG's 
 
    containers.each(function (index) { 
 

 
     //Get each of our SVG tags 
 
     var s = Snap(".animated-overlay.svg-" + index); 
 

 
     //Define our Paths 
 

 
     var defaultWhitePath = "M1.8978756799999998,64.59785067199999 C4.5919579200000005,94.29202528 74.7848272,99.01918832 128.25879712,95.43520928 361.0060832,78.08572735999999 468.2360832,8.157339040000004 562.54879712,6.478409280000005 646.3748272,4.004430240000005 663.93195792,95.19048896 664.08987568,93.45505007999999 664.24724128,114.2054704 664.1263182399999,144.17150224 664.1263182399999,166.67625712 443.1668704,166.67625712 222.2168704,166.67625712 1.26631824,166.67625712 1.26631824,165.36156416 -0.8027587199999999,36.217596 1.8898756799999998,64.59746416 z"; 
 

 
     //Define our Hover Paths 
 
     var hoverWhitePath = "M0.6989956799999999,94.82189867199999 C0.6932379199999996,94.83954528000001 15.029627200000007,-2.205931680000006 100.71287712,0.6387292800000068 186.5548832,3.4719673599999936 293.78488319999997,81.96869904 535.00287712,100.48192928 586.6196272000001,104.43659024 660.0332379199999,93.83112896 662.89099568,62.42577008 665.7387612800001,31.0390704 663.55047824,166.25166224 663.55047824,166.27033712000002 442.6004704,166.27033712000002 221.65047040000002,166.27033712000002 0.6904782399999999,166.27033712000002 0.6904782399999999,142.47900416000002 0.6887612800000001,118.58159599999999 0.6909956799999999,94.81490416 z"; 
 

 
     //Load up the default paths in the SVG 
 
     var whitePath = s.path(defaultWhitePath); 
 

 
     whitePath.attr({ 
 
      fill: "#00f" 
 
     }); 
 

 
     //Let's group our paths, it doesn't seem like you can animate the whole group though :(
 
     var paths = s.group(whitePath); 
 

 
     //Animate on Mouse Enter 
 
     $(containers[index]).mouseenter(function() { 
 
      whitePath.animate({ 
 
       path: hoverWhitePath 
 
      }, speed, animation); 
 
     }); 
 

 
     //Animate on Mouse Leave, return the paths to the default 
 
     $(containers[index]).mouseleave(function() { 
 
      whitePath.animate({ 
 
       path: defaultWhitePath 
 
      }, speed, animation); 
 
     }); 
 

 

 

 
    }); 
 

 
});

body { 
 
    background: #ddd; 
 
} 
 
.item { 
 
    max-height: 300px; 
 
    background: #ddd; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="category"> 
 
    <div class="item" style="background-image: url('images/category.jpg');"> <a href="#" title="Category Title"> 
 
      
 
      <svg viewbox="0, 0, 700, 300" preserveAspectRatio="none" class="animated-overlay svg-0"> 
 
       
 
      </svg> 
 
    
 
     </a> 
 

 
    </div> 
 
</div>