Draggable+TweenMax实现可拖动svg拼图小游戏代码

代码语言:html

所属分类:游戏

代码描述:Draggable+TweenMax实现可拖动svg拼图小游戏代码

代码标签: Draggable TweenMax 拖动 svg 拼图 游戏 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
   <style>
       html,
body {
  height: 100%;
}

body {
  background-color: lightyellow;
  overflow: hidden;
}

svg {
  width: 100%;
  height: 100%;
}
   </style>
    </head>
    <body>
        <!-- partial:index.partial.html -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
            <defs>
                <clipPath id='piece1'>
                    <path fill="#D6694F" d="M631.7 224.1c.4-.9.7-1.8 1-2.7-5.8-4.8-9.5-12-9.5-20.1 0-14.4 11.7-26.1 26.1-26.1 14.4 0 26.1 11.7 26.1 26.1 0 8.1-3.7 15.3-9.4 20.1.3.9.6 1.8 1 2.7 22.2 1 44.4 4 66.3 8.9 4.9-21.9 7.8-44.1 8.9-66.4.9-.4 1.8-.7 2.7-1 4.8 5.8 12 9.5 20.1 9.5 14.4 0 26.1-11.7 26.1-26.1 0-14.4-11.7-26.1-26.1-26.1-8.1 0-15.3 3.7-20.1 9.5-.9-.3-1.8-.6-2.7-1-1-22.3-4-44.5-8.9-66.4-21.9 4.9-44 7.8-66.3 8.9-.4.9-.7 1.8-1 2.7 5.8 4.8 9.4 12 9.4 20.1 0 14.4-11.7 26.1-26.1 26.1-14.4 0-26.1-11.7-26.1-26.1 0-8.1 3.7-15.3 9.5-20.1-.3-.9-.6-1.8-1-2.7-22.2-1-44.4-4-66.3-8.9v.1c-4.9 21.9-7.8 44.1-8.8 66.3-.9.4-1.8.7-2.7 1-4.8-5.8-12-9.5-20.1-9.5-14.4 0-26.1 11.7-26.1 26.1 0 14.4 11.7 26.1 26.1 26.1 8.1 0 15.3-3.7 20.1-9.5.9.3 1.8.6 2.7 1 1 22.3 4 44.5 8.8 66.3v.1c21.9-5 44.1-7.9 66.3-8.9z"/>
                </clipPath>
                <clipPath id='piece2'>
                    <path id="piece2" fill="#F2F0E9" d="M463.8 392.2c.4-.9.7-1.8 1-2.7-5.8-4.8-9.4-12-9.4-20.1 0-14.4 11.7-26.1 26.1-26.1 14.4 0 26.1 11.7 26.1 26.1 0 8.1-3.7 15.3-9.5 20.1.3.9.6 1.8 1 2.7 22.3 1 44.4 4 66.3 8.9 4.9-21.9 7.8-44.1 8.9-66.4.9-.4 1.8-.7 2.7-1 4.8 5.8 12 9.5 20.1 9.5 14.4 0 26.1-11.7 26.1-26.1 0-14.4-11.7-26.1-26.1-26.1-8.1 0-15.3 3.7-20.1 9.5-.9-.3-1.8-.6-2.7-1-1-22.3-4-44.5-8.9-66.4-21.9 4.9-44 7.8-66.3 8.9-.4.9-.7 1.8-1 2.7 5.8 4.8 9.5 12 9.5 20.1 0 14.4-11.7 26.1-26.1 26.1-14.4 0-26.1-11.7-26.1-26.1 0-8.1 3.7-15.3 9.4-20.1-.3-.9-.6-1.8-1-2.7-22.2-1-44.4-4-66.3-8.9v.1c-4.9 21.9-7.8 44.1-8.8 66.3-.9.4-1.8.7-2.7 1-4.8-5.8-12-9.5-20.1-9.5-14.4 0-26.1 11.7-26.1 26.1 0 14.4 11.7 26.1 26.1 26.1 8.1 0 15.3-3.7 20.1-9.5.9.3 1.8.6 2.7 1 1 22.3 4 44.5 8.8 66.3v.1c21.9-5 44.1-7.9 66.3-8.9z"/>
                </clipPath>
                <clipPath id='piece3'>
                    <path id="piece3" fill="#E4BE69" d="M556.6 166.5c-.9-.4-1.8-.7-2.7-1-4.8 5.8-12 9.5-20.1 9.5-14.4 0-26.1-11.7-26.1-26.1s11.7-26.1 26.1-26.1c8.1 0 15.3 3.7 20.1 9.5.9-.3 1.8-.6 2.7-1 1-22.3 4-44.5 8.8-66.4-21.9-4.9-44-7.8-66.3-8.9-.4-.9-.7-1.8-1-2.7 5.8-4.8 9.4-12 9.4-20.1 0-14.4-11.7-26.1-26.1-26.1-14.4 0-26.1 11.7-26.1 26.1 0 8.1 3.7 15.3 9.4 20.1-.3.9-.6 1.8-1 2.7-22.3 1-44.4 4-66.3 8.9 4.9 21.9 7.8 44.1 8.8 66.4.9.4 1.8.7 2.7 1 4.8-5.8 12-9.5 20.1-9.5 14.4 0 26.1 11.7 26.1 26.1s-11.6 26.1-26 26.1c-8.1 0-15.3-3.7-20.1-9.5-.9.3-1.8.6-2.7 1-1 22.3-4 44.5-8.8 66.4h.1c21.8 4.9 44 7.8 66.2 8.9.4.9.7 1.8 1 2.7-5.8 4.8-9.5 12-9.5 20.1 0 14.4 11.7 26.1 26.1 26.1s26.1-11.7 26.1-26.1c0-8.1-3.7-15.3-9.4-20.1.3-.9.6-1.8 1-2.7 22.2-1 44.4-4 66.2-8.9h.1c-4.9-21.9-7.8-44.1-8.8-66.4z"/>
                </clipPath>
                <clipPath id='piece4'>
                    <path id="piece4" fill="#59402F" d="M724.5 334.6c-.9-.4-1.8-.7-2.7-1-4.8 5.8-12 9.5-20.1 9.5-14.4 0-26.1-11.7-26.1-26.1 0-14.4 11.7-26.1 26.1-26.1 8.1 0 15.3 3.7 20.1 9.5.9-.3 1.8-.6 2.7-1 1-22.3 4-44.5 8.9-66.4-21.9-4.9-44-7.8-66.3-8.9-.4-.9-.7-1.8-1-2.7 5.8-4.8 9.4-12 9.4-20.1 0-14.4-11.7-26.1-26.1-26.1-14.4 0-26.1 11.7-26.1 26.1 0 8.1 3.7 15.3 9.4 20.1-.3.9-.6 1.8-1 2.7-22.3 1-44.4 4-66.3 8.9 4.9 21.9 7.8 44.1 8.8 66.4.9.4 1.8.7 2.7 1 4.8-5.8 12-9.5 20.1-9.5 14.4 0 26.1 11.7 26.1 26.1 0 14.4-11.7 26.1-26.1 26.1-8.1 0-15.3-3.7-20.1-9.5-.9.3-1.8.6-2.7 1-1 22.3-4 44.5-8.8 66.4h.1c21.8 4.9 44 7.8 66.2 8.9.4.9.7 1.8 1 2.7-5.8 4.8-9.5 12-9.5 20.1 0 14.4 11.7 26.1 26.1 26.1 14.4 0 26.1-11.7 26.1-26.1 0-8.1-3.7-15.3-9.4-20.1.3-.9.6-1.8 1-2.7 22.2-1 44.4-4 66.2-8.9h.1c-4.9-21.9-7.8-44.1-8.8-66.4z"/>
                </clipPath>
                <clipPath id='piece5'>
                    <path id="piece5" fill="#59402F" d="M295.9 224.1c.4-.9.7-1.8 1-2.7-5.8-4.8-9.4-12-9.4-20.1 0-14.4 11.7-26.1 26.1-26.1 14.4 0 26.1 11.7 26.1 26.1 0 8.1-3.7 15.3-9.4 20.1.3.9.6 1.8 1 2.7 22.2 1 44.4 4 66.3 8.9 4.9-21.9 7.8-44.1 8.9-66.4.9-.4 1.8-.7 2.7-1 4.8 5.8 12 9.5 20.1 9.5 14.4 0 26.1-11.7 26.1-26.1 0-14.4-11.7-26.1-26.1-26.1-8.1 0-15.3 3.7-20.1 9.5-.9-.3-1.8-.6-2.7-1-1-22.3-4-44.5-8.9-66.4-21.9 4.9-44 7.8-66.3 8.9-.4.9-.7 1.8-1 2.7 5.8 4.8 9.4 12 9.4 20.1 0 14.4-11.7 26.1-26.1 26.1-14.4 0-26.1-11.7-26.1-26.1 0-8.1 3.7-15.3 9.4-20.1-.3-.9-.6-1.8-1-2.7-22.2-1-44.4-4-66.3-8.9v.1c-4.9 21.9-7.8 44.1-8.8 66.3-.9.4-1.8.7-2.7 1-4.8-5.8-12-9.5-20.1-9.5-14.4 0-26.1 11.7-26.1 26.1 0 14.4 11.7 26.1 26.1 26.1 8.1 0 15.3-3.7 20.1-9.5.9.3 1.8.6 2.7 1 1 22.3 4 44.5 8.8 66.3v.1c21.9-5 44.1-7.9 66.3-8.9z"/>
                </clipPath>
                <clipPath id='piece6'>
                    <path id="piece6" fill="#D6694F" d="M128 392.2c.4-.9.7-1.8 1-2.7-5.8-4.8-9.4-12-9.4-20.1 0-14.4 11.7-26.1 26.1-26.1 14.4 0 26.1 11.7 26.1 26.1 0 8.1-3.7 15.3-9.4 20.1.3.9.6 1.8 1 2.7 22.2 1 44.4 4 66.3 8.9 4.9-21.9 7.8-44.1 8.9-66.4.9-.4 1.8-.7 2.7-1 4.8 5.8 12 9.5 20.1 9.5 14.4 0 26.1-11.7 26.1-26.1 0-14.4-11.7-26.1-26.1-26.1-8.1 0-15.3 3.7-20.1 9.5-.9-.3-1.8-.6-2.7-1-1-22.3-4-44.5-8.9-66.4-21.9 4.9-44 7.8-66.3 8.9-.4.9-.7 1.8-1 2.7 5.8 4.8 9.4 12 9.4 20.1 0 14.4-11.7 26.1-26.1 26.1-14.4 0-26.1-11.7-26.1-26.1 0-8.1 3.7-15.3 9.4-20.1-.3-.9-.6-1.8-1-2.7-22.2-1-44.4-4-66.3-8.9v.1c-4.9 21.9-7.8 44.1-8.8 66.3-.9.4-1.8.7-2.7 1-4.8-5.8-12-9.5-20.1-9.5C15.7 290.9 4 302.5 4 317c0 14.4 11.7 26.1 26.1 26.1 8.1 0 15.3-3.7 20.1-9.5.9.3 1.8.6 2.7 1 1 22.3 4 44.5 8.8 66.3v.1c21.9-4.9 44.1-7.8 66.3-8.8z"/>
                </clipPath>
                <clipPath id='piece7'>
                    <path id="piece7" fill="#F2F0E9" d="M220.8 166.5c-.9-.4-1.8-.7-2.7-1-4.8 5.8-12 9.5-20.1 9.5-14.4 0-26.1-11.7-26.1-26.1s11.7-26.1 26.1-26.1c8.1 0 15.3 3.7 20.1 9.5.9-.3 1.8-.6 2.7-1 1-22.3 4-44.5 8.8-66.4-21.9-4.9-44-7.8-66.3-8.9-.4-.9-.7-1.8-1-2.7 5.8-4.8 9.4-12 9.4-20.1 0-14.4-11.7-26.1-26.1-26.1-14.4 0-26.1 11.7-26.1 26.1 0 8.1 3.7 15.3 9.4 20.1-.3.9-.6 1.8-1 2.7-22.3 1-44.4 4-66.3 8.9 4.9 21.9 7.8 44.1 8.8 66.4.9.4 1.8.7 2.7 1 4.8-5.8 12-9.5 20.1-9.5 14.4 0 26.1 11.7 26.1 26.1s-11.6 26.1-26 26.1c-8.1 0-15.3-3.7-20.1-9.5-.9.3-1.8.6-2.7 1-1 22.3-4 44.5-8.8 66.4h.1c21.8 4.9 44 7.8 66.2 8.9.4.9.7 1.8 1 2.7-5.8 4.8-9.4 12-9.4 20.1 0 14.4 11.7 26.1 26.1 26.1 14.4 0 26.1-11.7 26.1-26.1 0-8.1-3.7-15.3-9.4-20.1.3-.9.6-1.8 1-2.7 22.2-1 44.4-4 66.2-8.9h.1c-5-21.9-7.9-44.1-8.9-66.4z"/>
                </clipPath>
                <clipPath id='piece8'>
                    <path id="piece8" fill="#E4BE69" d="M388.7 334.6c-.9-.4-1.8-.7-2.7-1-4.8 5.8-12 9.5-20.1 9.5-14.4 0-26.1-11.7-26.1-26.1 0-14.4 11.7-26.1 26.1-26.1 8.1 0 15.3 3.7 20.1 9.5.9-.3 1.8-.6 2.7-1 1-22.3 4-44.5 8.9-66.4-21.9-4.9-44-7.8-66.3-8.9-.4-.9-.7-1.8-1-2.7 5.8-4.8 9.4-12 9.4-20.1 0-14.4-11.7-26.1-26.1-26.1-14.4 0-26.1 11.7-26.1 26.1 0 8.1 3.7 15.3 9.4 20.1-.3.9-.6 1.8-1 2.7-22.3 1-44.4 4-66.3 8.9 4.9 21.9 7.8 44.1 8.8 66.4.9.4 1.8.7 2.7 1 4.8-5.8 12-9.5 20.1-9.5 14.4 0 26.1 11.7 26.1 26.1 0 14.4-11.7 26.1-26.1 26.1-8.1 0-15.3-3.7-20.1-9.5-.9.3-1.8.6-2.7 1-1 22.3-4 44.5-8.8 66.4h.1c21.8 4.9 44 7.8 66.2 8.9.4.9.7 1.8 1 2.7-5.8 4.8-9.4 12-9.4 20.1 0 14.4 11.7 26.1 26.1 26.1 14.4 0 26.1-11.7 26.1-26.1 0-8.1-3.7-15.3-9.4-20.1.3-.9.6-1.8 1-2.7 22.2-1 44.4-4 66.2-8.9h.1c-5-21.9-7.9-44.1-8.9-66.4z"/>
                </clipPath>
                <clipPath id='piece9'>
                    <path id="piece9" fill="#E4BE69" d="M631.7 560.3c.4-.9.7-1.8 1-2.7-5.8-4.8-9.5-12-9.5-20.1 0-14.4 11.7-26.1 26.1-26.1 14.4 0 26.1 11.7 26.1 26.1 0 8.1-3.7 15.3-9.4 20.1.3.9.6 1.8 1 2.7 22.2 1 44.4 4 66.3 8.9 4.9-21.9 7.8-44.1 8.9-66.4.9-.4 1.8-.7 2.7-1 4.8 5.8 12 9.5 20.1 9.5 14.4 0 26.1-11.7 26.1-26.1 0-14.4-11.7-26.1-26.1-26.1-8.1 0-15.3 3.7-20.1 9.5-.9-.3-1.8-.6-2.7-1-1-22.3-4-44.5-8.9-66.4-21.9 4.9-44 7.8-66.3 8.9-.4.9-.7 1.8-1 2.7 5.8 4.8 9.4 12 9.4 20.1 0 14.4-11.7 26.1-26.1 26.1-14.4 0-26.1-11.7-26.1-26.1 0-8.1 3.7-15.3 9.5-20.1-.3-.9-.6-1.8-1-2.7-22.2-1-44.4-4-66.3-8.9v.1c-4.9 21.9-7.8 44.1-8.8 66.3-.9.4-1.8.7-2.7 1-4.8-5.8-12-9.5-20.1-9.5-14.4 0-26.1 11.7-26.1 26.1 0 14.4 11.7 26.1 26.1 26.1 8.1 0 15.3-3.7 20.1-9.5.9.3 1.8.6 2.7 1 1 22.3 4 44.5 8.8 66.3v.1c21.9-5 44.1-7.9 66.3-8.9z"/>
                </clipPath>
                <clipPath id='piece10'>
                    <path id="piece10" fill="#59402F" d="M463.8 728.4c.4-.9.7-1.8 1-2.7-5.8-4.8-9.4-12-9.4-20.1 0-14.4 11.7-26.1 26.1-26.1 14.4 0 26.1 11.7 26.1 26.1 0 8.1-3.7 15.3-9.5 20.1.3.9.6 1.8 1 2.7 22.3 1 44.4 4 66.3 8.9 4.9-21.9 7.8-44.1 8.9-66.4.9-.4 1.8-.7 2.7-1 4.8 5.8 12 9.5 20.1 9.5 14.4 0 26.1-11.7 26.1-26.1 0-14.4-11.7-26.1-26.1-26.1-8.1 0-15.3 3.7-20.1 9.5-.9-.3-1.8-.6-2.7-1-1-22.3-4-44.5-8.9-66.4-21.9 4.9-44 7.8-66.3 8.9-.4.9-.7 1.8-1 2.7 5.8 4.8 9.5 12 9.5 20.1 0 14.4-11.7 26.1-26.1 26.1-14.4 0-26.1-11.7-26.1-26.1 0-8.1 3.7-15.3 9.4-20.1-.3-.9-.6-1.8-1-2.7-22.2-1-44.4-4-66.3-8.9v.1c-4.9 21.9-7.8 44.1-8.8 66.3-.9.4-1.8.7-2.7 1-4.8-5.8-12-9.5-20.1-9.5-14.4 0-26.1 11.7-26.1 26.1s11.7 26.1 26.1 26.1c8.1 0 15.3-3.7 20.1-9.5.9.3 1.8.6 2.7 1 1 22.3 4 44.5 8.8 66.3v.1c21.9-5 44.1-7.9 66.3-8.9z"/>
                </clipPath>
                <clipPath id='piece11'>
                    <path id="piece11" fill="#D6694F" d="M556.6 502.7c-.9-.4-1.8-.7-2.7-1-4.8 5.8-12 9.5-20.1 9.5-14.4 0-26.1-11.7-26.1-26.1 0-14.4 11.7-26.1 26.1-26.1 8.1 0 15.3 3.7 20.1 9.5.9-.3 1.8-.6 2.7-1 1-22.3 4-44.5 8.8-66.4-21.9-4.9-44-7.8-66.3-8.9-.4-.9-.7-1.8-1-2.7 5.8-4.8 9.4-12 9.4-20.1 0-14.4-11.7-26.1-26.1-26.1-14.4 0-26.1 11.7-26.1 26.1 0 8.1 3.7 15.3 9.4 20.1-.3.9-.6 1.8-1 2.7-22.3 1-44.4 4-66.3 8.9 4.9 21.9 7.8 44.1 8.8 66.4.9.4 1.8.7 2.7 1 4.8-5.8 12-9.5 20.1-9.5 14.4 0 26.1 11.7 26.1 26.1 0 14.4-11.7 26.1-26.1 26.1-8.1 0-15.3-3.7-20.1-9.5-.9.3-1.8.6-2.7 1-1 22.3-4 44.5-8.8 66.4h.1c21.8 4.9 44 7.8 66.2 8.9.4.9.7 1.8 1 2.7-5.8 4.8-9.5 12-9.5 20.1 0 14.4 11.7 26.1 26.1 26.1s26.1-11.7 26.1-26.1c0-8.1-3.7-15.3-9.4-20.1.3-.9.6-1.8 1-2.7 22.2-1 44.4-4 66.2-8.9h.1c-4.8-21.9-7.7-44.1-8.7-66.4z"/>
                </clipPath>
                <clipPath id='piece12'>
                    <path id="piece12" fill="#F2F0E9" d="M724.5 670.8c-.9-.4-1.8-.7-2.7-1-4.8 5.8-12 9.5-20.1 9.5-14.4 0-26.1-11.7-26.1-26.1 0-14.4 11.7-26.1 26.1-26.1 8.1 0 15.3 3.7 20.1 9.5.9-.3 1.8-.6 2.7-1 1-22.3 4-44.5 8.9-66.4-21.9-4.9-44-7.8-66.3-8.9-.4-.9-.7-1.8-1-2.7 5.8-4.8 9.4-12 9.4-20.1 0-14.4-11.7-26.1-26.1-26.1-14.4 0-26.1 11.7-26.1 26.1 0 8.1 3.7 15.3 9.4 20.1-.3.9-.6 1.8-1 2.7-22.3 1-44.4 4-66.3 8.9 4.9 21.9 7.8 44.1 8.8 66.4.9.4 1.8.7 2.7 1 4.8-5.8 12-9.5 20.1-9.5 14.4 0 26.1 11.7 26.1 26.1 0 14.4-11.7 26.1-26.1 26.1-8.1 0-15.3-3.7-20.1-9.5-.9.3-1.8.6-2.7 1-1 22.3-4 44.5-8.8 66.4h.1c21.8 4.9 44 7.8 66.2 8.9.4.9.7 1.8 1 2.7-5.8 4.8-9.5 12-9.5 20.1 0 14.4 11.7 26.1 26.1 26.1 14.4 0 26.1-11.7 26.1-26.1 0-8.1-3.7-15.3-9.4-20.1.3-.9.6-1.8 1-2.7 22.2-1 44.4-4 66.2-8.9h.1c-4.9-21.9-7.8-44.1-8.8-66.4z"/>
                </clipPath>
                <clipPath id='piece13'>
                    <path id="piece13" fill="#F2F0E9" d="M295.9 560.3c.4-.9.7-1.8 1-2.7-5.8-4.8-9.4-12-9.4-20.1 0-14.4 11.7-26.1 26.1-26.1 14.4 0 26.1 11.7 26.1 26.1 0 8.1-3.7 15.3-9.4 20.1.3.9.6 1.8 1 2.7 22.2 1 44.4 4 66.3 8.9 4.9-21.9 7.8-44.1 8.9-66.4.9-.4 1.8-.7 2.7-1 4.8 5.8 12 9.5 20.1 9.5 14.4 0 26.1-11.7 26.1-26.1 0-14.4-11.7-26.1-26.1-26.1-8.1 0-15.3 3.7-20.1 9.5-.9-.3-1.8-.6-2.7-1-1-22.3-4-44.5-8.9-66.4-21.9 4.9-44 7.8-66.3 8.9-.4.9-.7 1.8-1 2.7 5.8 4.8 9.4 12 9.4 20.1 0 14.4-11.7 26.1-26.1 26.1-14.4 0-26.1-11.7-26.1-26.1 0-8.1 3.7-15.3 9.4-20.1-.3-.9-.6-1.8-1-2.7-22.2-1-44.4-4-66.3-8.9v.1c-4.9 21.9-7.8 44.1-8.8 66.3-.9.4-1.8.7-2.7 1-4.8-5.8-12-9.5-20.1-9.5-14.4 0-26.1 11.7-26.1 26.1 0 14.4 11.7 26.1 26.1 26.1 8.1 0 15.3-3.7 20.1-9.5.9.3 1.8.6 2.7 1 1 22.3 4 44.5 8.8 66.3v.1c21.9-5 44.1-7.9 66.3-8.9z"/>
                </clipPath>
                <clipPath id='piece14'>
                    <path id="piece14" fill="#E4BE69" d="M128 728.4c.4-.9.7-1.8 1-2.7-5.8-4.8-9.4-12-9.4-20.1 0-14.4 11.7-26.1 26.1-26.1 14.4 0 26.1 11.7 26.1 26.1 0 8.1-3.7 15.3-9.4 20.1.3.9.6 1.8 1 2.7 22.2 1 44.4 4 66.3 8.9 4.9-21.9 7.8-44.1 8.9-66.4.9-.4 1.8-.7 2.7-1 4.8 5.8 12 9.5 20.1 9.5 14.4 0 26.1-11.7 26.1-26.1 0-14.4-11.7-26.1-26.1-26.1-8.1 0-15.3 3.7-20.1 9.5-.9-.3-1.8-.6-2.7-1-1-22.3-4-44.5-8.9-66.4-21.9 4.9-44 7.8-66.3 8.9-.4.9-.7 1.8-1 2.7 5.8 4.8 9.4 12 9.4 20.1 0 14.4-11.7 26.1-26.1 26.1-14.4 0-26.1-11.7-26.1-26.1 0-8.1 3.7-15.3 9.4-20.1-.3-.9-.6-1.8-1-2.7-22.2-1-44.4-4-66.3-8.9v.1c-4.9 21.9-7.8 44.1-8.8 66.3-.9.4-1.8.7-2.7 1-4.8-5.8-12-9.5-20.1-9.5-14.4-.1-26.1 11.5-26.1 26s11.7 26.1 26.1 26.1c8.1 0 15.3-3.7 20.1-9.5.9.3 1.8.6 2.7 1 1 22.3 4 44.5 8.8 66.3v.1c21.9-4.9 44.1-7.8 66.3-8.8z"/>
                </clipPath>
                <clipPath id='piece15'>
                    <path id="piece15" fill="#59402F" d="M220.8 502.7c-.9-.4-1.8-.7-2.7-1-4.8 5.8-12 9.5-20.1 9.5-14.4 0-26.1-11.7-26.1-26.1 0-14.4 11.7-26.1 26.1-26.1 8.1 0 15.3 3.7 20.1 9.5.9-.3 1.8-.6 2.7-1 1-22.3 4-44.5 8.8-66.4-21.9-4.9-44-7.8-66.3-8.9-.4-.9-.7-1.8-1-2.7 5.8-4.8 9.4-12 9.4-20.1 0-14.4-11.7-26.1-26.1-26.1-14.4 0-26.1 11.7-26.1 26.1 0 8.1 3.7 15.3 9.4 20.1-.3.9-.6 1.8-1 2.7-22.3 1-44.4 4-66.3 8.9 4.9 21.9 7.8 44.1 8.8 66.4.9.4 1.8.7 2.7 1 4.8-5.8 12-9.5 20.1-9.5 14.4 0 26.1 11.7 26.1 26.1 0 14.4-11.7 26.1-26.1 26.1-8.1 0-15.3-3.7-20.1-9.5-.9.3-1.8.6-2.7 1-1 22.3-4 44.5-8.8 66.4h.1c21.8 4.9 44 7.8 66.2 8.9.4.9.7 1.8 1 2.7-5.8 4.8-9.4 12-9.4 20.1 0 14.4 11.7 26.1 26.1 26.1 14.4 0 26.1-11.7 26.1-26.1 0-8.1-3.7-15.3-9.4-20.1.3-.9.6-1.8 1-2.7 22.2-1 44.4-4 66.2-8.9h.1c-4.9-21.9-7.8-44.1-8.8-66.4z"/>
                </clipPath>
                <clipPath id="piece16">
                    <path id="piece16" fill="#D6694F" d="M388.7 670.8c-.9-.4-1.8-.7-2.7-1-4.8 5.8-12 9.5-20.1 9.5-14.4 0-26.1-11.7-26.1-26.1 0-14.4 11.7-26.1 26.1-26.1 8.1 0 15.3 3.7 20.1 9.5.9-.3 1.8-.6 2.7-1 1-22.3 4-44.5 8.9-66.4-21.9-4.9-44-7.8-66.3-8.9-.4-.9-.7-1.8-1-2.7 5.8-4.8 9.4-12 9.4-20.1 0-14.4-11.7-26.1-26.1-26.1-14.4 0-26.1 11.7-26.1 26.1 0 8.1 3.7 15.3 9.4 20.1-.3.9-.6 1.8-1 2.7-22.3 1-44.4 4-66.3 8.9 4.9 21.9 7.8 44.1 8.8 66.4.9.4 1.8.7 2.7 1 4.8-5.8 12-9.5 20.1-9.5 14.4 0 26.1 11.7 26.1 26.1 0 14.4-11.7 26.1-26.1 26.1-8.1 0-15.3-3.7-20.1-9.5-.9.3-1.8.6-2.7 1-1 22.3-4 44.5-8.8 66.4h.1c21.8 4.9 44 7.8 66.2 8.9.4.9.7 1.8 1 2.7-5.8 4.8-9.4 12-9.4 20.1 0 14.4 11.7 26.1 26.1 26.1 14.4 0 26.1-11.7 26.1-26.1 0-8.1-3.7-15.3-9.4-20.1.3-.9.6-1.8 1-2.7 22.2-1 44.4-4 66.2-8.9h.1c-5-21.9-7.9-44.1-8.9-66.4z"/>
                </clipPath>
            </defs>
            <symbol id='balloon'>
                <g id='balloon-innards' transform='matrix(1, 0, 0, 1, 0, 0)'>
                    <path fill="#56473E" d="M375.3 350.3h1.2v19.8h-1.2z"/>
                    <path fill="#56473E" d="M409.2 350.3h1.2v20.1h-1.2z"/>
                    <path fill="#8C4130" d="M419.1 393.2c0 4.3-4.5 7.7-10 7.7h-32.9c-5.5 0-10-3.5-10-7.7V377c0-4.3 4.5-7.7 10-7.7 0 0 6.5 2.6 17.9 2.6 11.4 0 15-2.6 15-2.6 5.5 0 10 3.5 10 7.7v16.2z"/>
                    <path fill="#733329" d="M396.1 390.5c-8.4 3.1-20.2 6-29.2 5.3 1.4 3 5 5.2 9.4 5.2h32.9c5.5 0 10-3.5 10-7.7v-15.5c-2.4 2.2-10.2 7.9-23.1 12.7z"/>
                    <path fill="#56473E" d="M366.3 377.8s4.2 2.6 8.5-.4c0 0 6.4 4.3 11.3-.1 0 0 7.3 4.4 12.4-.1 0 0 5.4 4.1 10.9.2 0 0 4 4.5 9.9.1v1.8c-5.3 4.4-9.9-.1-9.9-.1-5.4 3.8-10.9-.2-10.9-.2-5.1 4.5-12.4.1-12.4.1-4.8 4.4-11.3.1-11.3.1-4.3 2.9-8.5.4-8.5.4v-1.8z"/>
                    <g fill="#DA8D5B">
                        <path d="M375.7 380c0 .1 0 .1 0 0 0 .9-.3 1.5-.8 1.5-.4 0-.8-.6-.8-1.4v-.2c-1.8.6-3.2 3.7-3.2 5.6 0 2.2 1.7 4 3.8 4s3.8-1.8 3.8-4c.1-1.8-1.1-4.7-2.8-5.5z"/>
                        <path d="M375 381.5c.4 0 .8-.6.8-1.4v-.1c0-.7-.4-1.3-.8-1.3s-.7.5-.8 1.2v.2c0 .8.4 1.4.8 1.4z"/>
                    </g>
                    <g fill="#DA8D5B">
                        <path d="M386.9 380c0 .1 0 .1 0 0 0 .9-.3 1.5-.8 1.5-.4 0-.8-.6-.8-1.4v-.2c-1.8.6-3.2 3.7-3.2 5.6 0 2.2 1.7 4 3.8 4 2.1 0 3.8-1.8 3.8-4 .1-1.8-1.1-4.7-2.8-5.5z"/>
                        <path d="M386.1 381.5c.4 0 .8-.6.8-1.4v-.1c0-.7-.4-1.3-.8-1.3s-.7.5-.8 1.2v.2c.1.8.4 1.4.8 1.4z"/>
                    </g>
                    <g fill="#DA8D5B">
                        <path d="M399.3 380c0 .1 0 .1 0 0 0 .9-.3 1.5-.8 1.5-.4 0-.8-.6-.8-1.4v-.2c-1.8.6-3.2 3.7-3.2 5.6 0 2.2 1.7 4 3.8 4 2.1 0 3.8-1.8 3.8-4 .1-1.8-1.1-4.7-2.8-5.5z"/>
                        <path d="M398.5 381.5c.4 0 .8-.6.8-1.4v-.1c0-.7-.4-1.3-.8-1.3s-.7.5-.8 1.2v.2c.1.8.4 1.4.8 1.4z"/>
                    </g>
                    <g fill="#DA8D5B">
                        <path d="M410.2 380c0 .1 0 .1 0 0 0 .9-.3 1.5-.8 1.5-.4 0-.8-.6-.8-1.4v-.2c-1.8.6-3.2 3.7-3.2 5.6 0 2.2 1.7 4 3.8 4 2.1 0 3.8-1.8 3.8-4 .1-1.8-1.1-4.7-2.8-5.5z"/>
                        <path d="M409.4 381.5c.4 0 .8-.6.8-1.4v-.1c0-.7-.4-1.3-.8-1.3s-.7.5-.8 1.2v.2c.1.8.4 1.4.8 1.4z"/>
                    </g>
                    <path fill="#C85D54" d="M374.7 306.1s-18.4-34.7-47.2-83.6c-.2-.4-.5-.8-.7-1.3-11.5-19.6-20.9-39.7-27-59.5-6.1-19.7-9-38.9-7.8-56.9.6-9.6 2.4-18.8 5.6-27.5 3.6-9.9 8.4-17.4 13.7-23.1-3.9.5-26.3 5-41.3 50.1-.1.2-.1.3-.2.5-6.3 19.4-6.4 38.7-2.3 56.9 5.2 22.9 17.2 44 31.7 60.7 3.3 3.9 6.8 7.5 10.4 10.9 31.4 29.8 59.5 76.6 59.5 76.6s4.9.3 7.3-2.6c-.9-.5-1.7-1.2-1.7-1.2z"/>
                    <path fill="#C85D54" d="M514.3 104.9c-.1-.2-.1-.3-.2-.5-15-45.1-37.3-49.6-41.3-50.1 5.3 5.7 10.1 13.2 13.7 23.1 3.1 8.7 4.9 17.9 5.6 27.5 1.2 18-1.7 37.2-7.8 56.9-6.1 19.7-15.4 39.9-27 59.5-.3.4-.5.8-.7 1.3-28.8 48.9-47.2 83.6-47.2 83.6s-.8.7-1.7 1.3c2.3 2.9 7.3 2.6 7.3 2.6s28.1-46.9 59.5-76.6c3.6-3.4 7-7 10.4-10.9 14.5-16.8 26.5-37.8 31.7-60.7 4.1-18.3 4-37.6-2.3-57z"/>
                    <path fill="#F2F0E9" d="M291.8 107.8c-.1 2.6-.1 5.2-.1 7.8l.1 3.9c.1 2.7.3 5.3.6 8l.5 3.9c.3 2.4.7 4.9 1.1 7.3l.4 2.2.3 1.4c.1.6.2 1.1.3 1.7l.9 3.9c1.1 4.6 2.3 9.1 3.7 13.8 6.1 19.7 15.4 39.9 27 59.5.2.4.5.8.7 1.3 28.8 48.9 47.2 83.6 47.2 83.6s.8.7 1.7 1.3c1.5.8 3.6 1.3 4.4-1.9-.7-.5-1.1-1-1.1-1s-14.5-46.2-28.8-82c-1.2-3.1-2.5-6.1-3.7-9-6.6-15.4-13.4-32.7-18.1-51.8-.2-.8-.4-1.7-.6-2.5l-.9-3.9c-.1-.6-.3-1.3-.4-1.9l-.8-3.9c-.4-2.2-.8-4.5-1.1-6.8h-.1v-1.6c-.3-1.8-.5-3.7-.7-5.5v1.6l-.2-3.9c-.3-2.6-.5-5.2-.6-7.9l-.2-3.9c-.1-2.4-.1-4.8-.1-7.2l.1-3.9c0-1.8.1-3.6.2-5.4.6-9.9 2-20.2 4.5-30.8 4.4-18.8 11.8-29.8 19.7-36.2-3.8-.7-21.7.8-36.3 16.4-5.3 5.7-10.1 13.2-13.7 23.1-3.1 8.7-4.9 17.9-5.6 27.5"/>
                    <path fill="#F2F0E9" d="M492.8 104.9c-.6-9.6-2.4-18.8-5.6-27.5-3.6-9.9-8.4-17.4-13.7-23.1-14.6-15.6-32.5-17.1-36.3-16.4 7.9 6.4 15.3 17.4 19.7 36.2 2.5 10.6 3.9 20.9 4.5 30.8 1.2 20.5-1.3 39.5-5.6 56.9-4.7 19.1-11.6 36.3-18.1 51.8-1.2 2.9-2.5 5.9-3.7 9-14.3 35.7-28.8 82-28.8 82s-.4.4-1.1 1c.7 3.2 2.8 2.8 4.4 1.9 1-.5 1.7-1.3 1.7-1.3s18.4-34.7 47.2-83.6c.2-.4.5-.8.7-1.3 11.5-19.6 20.9-39.7 27-59.5 6-19.7 8.9-38.9 7.7-56.9z"/>
                    <path fill="#C85D54" d="M385.7 302.8c-2.4-28.7-9.1-54-15.8-80.3-4.8-19.1-9.6-38.8-12.7-60.7-2.4-17.3-3.7-36-3.1-56.9 0-1.1.1-2.2.1-3.3 1.8-46.9 14.6-64.6 25.8-71-4.9-1.2-19.5-3.3-32.6 7.2-7.9 6.4-15.3 17.4-19.7 36.2-2.5 10.6-3.9 20.9-4.5 30.8-1.2 20.5 1.3 39.5 5.6 56.9 4.7 19.1 11.6 36.3 18.1 51.8 1.2 2.9 2.5 5.9 3.7 9 14.3 35.7 28.8 82 28.8 82s.4.4 1.1 1c1.8 1.4 5.1 3.3 6.6-.2-.7-1.2-1.4-2.5-1.4-2.5z"/>
                    <path fill="#C85D54" d="M461.4 104.9c-.6-9.9-2-20.2-4.5-30.8-4.4-18.8-11.8-29.8-19.7-36.2-13.1-10.6-27.7-8.4-32.6-7.2 11.3 6.4 24 24.1 25.8 71 0 1.1.1 2.2.1 3.3.6 20.9-.7 39.6-3.1 56.9-3 21.9-7.8 41.6-12.7 60.7-6.7 26.4-13.4 51.7-15.8 80.3 0 0-.6 1.3-1.7 2.5 1.5 3.5 4.8 1.5 6.6.2.7-.5 1.1-1 1.1-1s14.5-46.2 28.8-82c1.2-3.1 2.5-6.1 3.7-9 6.6-15.4 13.4-32.7 18.1-51.8 4.6-17.4 7.1-36.4 5.9-56.9z"/>
                    <path fill="#F2F0E9" d="M430.6 104.9c0-1.1-.1-2.2-.1-3.3-1.8-46.9-14.6-64.6-25.8-71-2.4-1.4-4.7-2.2-6.8-2.7v-.1s-2.1-.6-5.5-.6c-3.3-.1-5.5.6-5.5.6v.1c-2.1.5-4.4 1.4-6.8 2.7-11.3 6.4-24 24.1-25.8 71 0 1.1-.1 2.2-.1 3.3-.6 20.9.7 39.6 3.1 56.9 3 21.9 7.8 41.6 12.7 60.7 6.7 26.4 13.4 51.7 15.8 80.3 0 0 .6 1.3 1.7 2.5 1.2 1.3 3 2.5 5 1 2 1.5 3.8.3 5-1 1-1.2 1.7-2.5 1.7-2.5 2.4-28.7 9.1-54 15.8-80.3 4.8-19.1 9.6-38.8 12.7-60.7 2.2-17.3 3.5-36 2.9-56.9z"/>
                    <g>
                        <path opacity=".1" fill="#999" d="M503.9 83.1s24.8 76.6-63.4 127.9c-88.2 51.3-164.3-29.2-164.3-29.2s5.5 22.6 29.8 46.8c24.3 24.3 61.2 73.9 63.4 81.6 0 0 27.6-8.3 44.1 0 0 0 29.8-48 59.5-79.4 29.8-31.4 66.7-82.7 30.9-147.7z"/>
               .........完整代码请登录后点击上方下载按钮下载查看

网友评论0