javascript - 使用 Snap 对分组/分层 SVG 进行动画处理

Question

在天才的帮助下@Sphinxxx我成功创建了一个包含三个阶段的 SVG 路径动画；初始化，单击并悬停。在 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>