SVG морфинг без переворота

Question

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

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

Answer 1

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

Примечание: анимация greensock содержит 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>