Анимировать сгруппированный/многослойный SVG с помощью Snap

Question

С помощью гения @Sphinxxx Мне удалось создать анимацию пути SVG, состоящую из трех этапов; init, нажмите и наведите указатель мыши. Переменные аккуратно созданы с помощью Snap.svg Смотрите ниже Codepen для рабочего демо:

http://codepen.io/Sphinxxxx/pen/EPzmgO

Я хочу, чтобы улучшить эту анимацию путем добавления строк, изменение размера в зависимости от состояния. В основном то, что должно выглядеть следующим образом:

<path d="M33.1,18.2c1.1,3.9-4.3,8.6-10.6,9.3c-5.4,0.6-1.8,6.9-7.1,8.9c-6.7,2.6-9-0.7-8.5-6c0.5-4.6-9.6-6-3.5-12 
C6.7,15.3,0.6,10.1,4.9,7c4-2.9,4,7.6,13-4.1c2.7-3.5,11.4-0.1,7.4,8.2C22.4,17.2,31.2,11.6,33.1,18.2z"/> 

<line x1="1.9" y1="20.5" x2="33.1" y2="20.5"/> 
<line x1="4" y1="13.5" x2="24.9" y2="13.5"/> 
<line x1="5.9" y1="27.5" x2="22.5" y2="27.5"/> 

Как я группировать различные виды SVG материала (трактов и линий) для анимации вместе? Любая помощь очень полезна!

Answer 1

Смотрите мою демонстрацию, более подробная информация на сайте pattern fill: -

//SVG-snap 
 
var none = "none", 
 
    sausRed = "#ff1a29", 
 
    strokeWidth = 3; 
 

 
var initLangSvg = "M21.5,11.5c0,2.8-1.1,5.3-2.9,7.1c-1.8,1.8-4.3,2.9-7.1,2.9c-2.8,0-5.3-1.1-7.1-2.9c-1.8-1.8-2.9-4.3-2.9-7.1c0-2.8,1.1-5.3,2.9-7.1c1.8-1.8,4.3-2.9,7.1-2.9c2.8,0,5.3,1.1,7.1,2.9C20.4,6.2,21.5,8.7,21.5,11.5z", 
 
    hoverLangSvg = "M21.5,13.5c0,2.8-2.1,3.8-4.6,5c-4.7,2.3-3.7,5.7-6.3,7s-8.4,0.8-9.1-3.9c-0.6-4.1,1.1-5.3,1.1-8.1c0-2.8-2.5-4.9-0.1-8.1c1.8-2.3,3.6-3.9,9.1-3.9c5.2,0,4.1,4.2,7,6C20.9,8.8,21.5,10.7,21.5,13.5z", 
 
    clickLangSvg = "M33.1,18.2c1.1,3.9-4.3,8.6-10.6,9.3c-5.4,0.6-1.8,6.9-7.1,8.9c-6.7,2.6-9-0.7-8.5-6c0.5-4.6-9.6-6-3.5-12C6.7,15.3,0.6,10.1,4.9,7c4-2.9,4,7.6,13-4.1c2.7-3.5,11.4-0.1,7.4,8.2C22.4,17.2,31.2,11.6,33.1,18.2z"; 
 
/* Triangle -> circle -> square: 
 
var initLangSvg = "M20,9 l11,19 h-22z", 
 
    hoverLangSvg = "M20,10 a10,10 0 1,1 -.1,0z", 
 
    clickLangSvg = "M29,11 v18 h-18 v-18z"; 
 
*/ 
 

 
//Adjust path positions (recalculate path points) before we use them: 
 
//http://snapsvg.io/docs/#Snap.path.map 
 
var matrix = new Snap.Matrix(); 
 
initLangSvg = Snap.path.map(initLangSvg, matrix.translate(4,7)); 
 
hoverLangSvg = Snap.path.map(hoverLangSvg, matrix.translate(1,-1)); 
 

 
var chooseLang = Snap("#chooseLang svg").attr({viewBox:"0,0,40,40", preserveAspectRatio:"xMidYMin"}), 
 
    boundingBox = chooseLang.rect(0, 0, 40, 40).attr({fill: none, stroke: none, strokeWidth: none}), 
 
    outerCircle = chooseLang.path(initLangSvg).attr({fill: "url(#lines)", stroke: sausRed, strokeWidth: strokeWidth}), 
 
    boundingBoxGroup = chooseLang.group(outerCircle, boundingBox); 
 

 
function chooseLangInit() { 
 
    outerCircle.attr({style: "fill: url(#lines); stroke-width: 3"}) 
 
    outerCircle.animate({d: initLangSvg}, 400); 
 
} 
 
function chooseLangHover() { 
 
     outerCircle.attr({style: "fill: url(#lines2); stroke-width: 3"}) 
 
    outerCircle.animate({d: hoverLangSvg}, 400); 
 
} 
 
function chooseLangClick() { 
 
     outerCircle.attr({style: "fill: url(#lines3); stroke-width: 3"}) 
 
    outerCircle.animate({d: clickLangSvg}, 400); 
 
} 
 

 

 
//// 
 
$(function() { 
 
    $('#chooseLang').hover(chooseLangHover, chooseLangInit) 
 
        .click(chooseLangClick); 
 
});

.hotCornersBtn, svg { 
 
    display: block; 
 
    width: 40px; 
 
    height: 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"> </script> 
 

 
<a href="#" id="chooseLang" class="hotCornersBtn"> 
 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <defs> 
 
    <pattern id="lines" patternUnits="userSpaceOnUse" width="8" height="8"> 
 
     <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnPiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmJyAvPiAgPHJlY3QgeD0nMCcgeT0nMCcgd2lkdGg9JzEwJyBoZWlnaHQ9JzInIGZpbGw9JyNDRjFENkQnIC8+ICA8cmVjdCB4PScwJyB5PSc0JyB3aWR0aD0nMTAnIGhlaWdodD0nMicgZmlsbD0nI0NGMUQ2RCcgLz48L3N2Zz4=" 
 
     x="0" y="0" width="8" height="8"> 
 
     </image> 
 
     
 
     </pattern> 
 
     <pattern id="lines2" patternUnits="userSpaceOnUse" width="10" height="10"> 
 
     <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+ICA8cmVjdCB3aWR0aD0nMTAnIGhlaWdodD0nMTAnIGZpbGw9JyNmZmYnIC8+ICA8cmVjdCB4PScwJyB5PScwJyB3aWR0aD0nMTAnIGhlaWdodD0nMicgZmlsbD0nI0NGMUQ2RCcgLz4gIDxyZWN0IHg9JzAnIHk9JzUnIHdpZHRoPScxMCcgaGVpZ2h0PScyJyBmaWxsPScjQ0YxRDZEJyAvPjwvc3ZnPg==" 
 
     x="0" y="0" width="10" height="10"> 
 
     </image> 
 
     
 
    </pattern> 
 
     <pattern id="lines3" patternUnits="userSpaceOnUse" width="12" height="12"> 
 
     <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMic+ICA8cmVjdCB3aWR0aD0nMTInIGhlaWdodD0nMTInIGZpbGw9JyNmZmYnIC8+ICA8cmVjdCB4PScwJyB5PScwJyB3aWR0aD0nMTInIGhlaWdodD0nMicgZmlsbD0nI0NGMUQ2RCcgLz4gIDxyZWN0IHg9JzAnIHk9JzYnIHdpZHRoPScxMicgaGVpZ2h0PScyJyBmaWxsPScjQ0YxRDZEJyAvPjwvc3ZnPg==" 
 
     x="0" y="0" width="12" height="12"> 
 
     </image> 
 
     
 
    </pattern> 
 
    </defs> 
 
</svg 
 
</a>

Answer 2

Спасибо Элвин указал мне в правильном направлении. Наложение рисунка не было достаточно гибким для моего вкуса, хотя я сделал это, чтобы воссоздать это, используя pattern в svg.

// pattern lines 
patern = Snap("#chooseLang svg"); 
var line1 = patern.line(0,13,40,13); 

var line2 = patern.line(0,18.5,40,18.5); 

var line3 = patern.line(0,24,40,24);  

var allLines = patern.group(line1, line2, line3).pattern(0, 0, 40, 40); 
allLines.attr({ 
     fill: "none", 
     stroke: sausRed, 
     strokeWidth: strokeWidth 
    });