SVG.js 的蜜蜂 SVG 动画
Bee SVG animation with SVG.js
如你所见codepen, there is a simple Bee SVG in a SVG canvas. Ideally I would like to achieve an animation where the Bee is buzzing around that canvas but for now I am simple trying to move it left to right. The library I am using is snap.svg
我的基础是这个codepen，但不知何故我无法让它工作。
HTML:
<div class="wrapper">
<svg id='snappy' class='img-responsive' viewBox="0 0 1200 700">
<svg id="bee" x="100" y="100" xmlns="http://www.w3.org/2000/svg" width="194.874" height="214.536" viewBox="0 0 51.56 56.763" xmlns:v="https://vecta.io/nano"><g transform="matrix(.26458 0 0 .26458 -10.137 -3.944)"><path fill="#fff" d="M108.859 137.318c0-.324 1.515-2.606 5.195-3.131 15.73-2.247 29.851 28.808 28.898 30.272s-8.497 8.627-12.098 9.47-7.162 3.217-8.822 3.153-7.139.542-7.277-.674-2.669-15.399-2.669-20.033-.242-13.202-.894-14.606-2.333-4.451-2.333-4.451z"/><path d="M115.581 138.635c-3.242-3.606-9.84-6.911-18.839-4.642-8.959 2.259-24.573 13.377-24.026 31.944s10.65 29.76 13.653 32.217c1.802 1.475 3.643-1.105 6.233-3.991 0 0 .012-.012.016-.014.656-.73 3.949-4.837 5.688-6.711 3.894-4.197 8.938-15.764 8.938-15.764s.121 6.998-4.97 16.378c7.493-4.812 19.774-15.761 21.227-24.845 2.177-13.618-4.84-21.147-7.92-24.572z"/><path fill="#fc0" d="M142.953 137.434s15.938-.781 19.384-.001 17.452 2.778 26.807 17.822c6.952 11.178 5.257 29.734 3.236 35.164s-12.588 20.325-12.588 20.325l-18.78-11.803c-1.198-.405-9.44-6.392-10.494-8.12s-2.08-1.278-3.834-4.566-2.604-4.525-3.73-6.645c-3.598-6.759-5.988-3.201-7.124-3.201h-4.647s7.174-22.721 5.91-28.527-4.292-12.923-4.292-12.923z"/><path d="M85.567 157.957s-9.254-.959-19.146 4.846c-12.967 7.611-19.118 14.352-18.914 17.524s3.506 4.138 6.089.675 1.656-5.792 1.656-5.792 10.388-11.165 19.302-13.371c8.325-2.058 12.872-1.2 12.872-1.2l3.535-2.447z"/><path fill="#fff" d="M91.283 149.83c-4.109.951-7.615 5.01-8.191 14.743-.663 11.188-.379 15.107 5.461 11.739 7.098-4.094 11.098-12.776 10.375-20.203-.482-4.96-3.166-7.316-7.645-6.279z"/><path d="M82.887 142.196s-7.062-6.058-18.5-6.918c-14.993-1.129-23.886.911-25.525 3.636s.526 5.396 4.621 4.021 4.66-3.816 4.66-3.816 14.896-3.265 23.48 0c8.015 3.049 11.264 6.343 11.264 6.343h4.298zm28.306-6.894s12.977.547 17.062 10.158c9.112 21.432-13.789 31.615-13.789 31.615s18.582 4.889 26.41-2.433 14.39-20.897 5.05-34.432-24.13-13.539-34.733-4.908zm32.594 2.132s8.118-1.225 15.521 4.325c7.321 5.491 9.132 22.7 2.84 31.809-6.929 10.029-16.283 10.982-16.283 10.982l-4.166-7.069s12.689-5.993 14.452-16.489c1.766-10.514-2.513-20.688-12.364-23.558zm13.201-.342s15.168 2.447 17.655 16.897c2.5 14.514-3.343 24.952-8.627 28.904-10.062 7.525-18.28 5.037-18.28 5.037s7.009 7.176 9.488 8.738c.802.504 28.466-6.25 27.96-33.058-.198-10.489-3.961-26.677-28.196-26.518z"/><path d="M186.951 152.173s9.127 21.085 2.271 33.324c-7.053 12.591-15.904 15.479-21.584 15.115-4.598-.294-4.355-.536-4.355-.536s13.573 14.39 14.36 19.881.03 1.704 2.112-2.271 15.938-11.729 17.538-29.422c1.541-17.03-1.632-24.541-10.342-36.091zm-61.158 25.308s-.189 4.229-1.136 7.069 0 3.787 1.136 8.331 1.692 7.763-.764 9.467-2.076 2.65-2.455 1.704.343-1.391 1.118-3.441 1.497-3.754 0-6.973-4.242-6.059-3.58-10.448c.311-2.061.947-4.895.947-4.895l1.515-1.888zm8.9-1.072c.739 1.332 3.407 5.302 3.786 8.142s-1.515 4.542-1.894 5.868-2.225 4.735.024 7.765 3.194 6.248 3.194 9.845.947 5.491 1.894 3.408 2.272-1.521 0-7.008-2.343-5.346-2.875-7.689 4.059-6.222 4.13-9.3-2.58-9.137-3.148-11.031-2.271-4.733-2.271-4.733zm14.771 12.684c.567.566 5.518 9.09 3.987 16.474s-4.44 12.875-1.849 16.283 6.189 7.385 6.946 7.574 1.894-1.137 1.325-2.083-2.777-2.648-4.023-5.018c-1.343-2.557-2.811-5.207-1.106-8.236s3.048-7.012 3.048-9.66-.113-4.288-.303-7.696-2.745-7.639-2.745-7.639h-5.28zm-47.853-23.281c-1.666 4.811-5.958 7.689-9.585 6.43s-5.219-6.174-3.551-10.983 5.959-7.689 9.586-6.43 5.219 6.173 3.55 10.983z"/><circle fill="#fff" cx="90.466" cy="161.179" r="3.281"/></g><path d="M35.427 10.733c-7.454 5.988-11.371 20.431-11.371 20.945a106.44 106.44 0 0 1 1.077.619c1.077.621 2.482 2.378 2.482 2.378l1.029-.323-.001-.001c1.971-.633 5.014-1.7 8.184-3.161 5.113-2.358 14.732-10.106 14.733-18.447.001-7.975-8.706-7.975-16.133-2.009zm.449 18.393c-2.914 1.344-5.754 2.353-7.623 2.963-.067.021-.588.257-1.047.456-1.009-1.178-2.056-1.651-2.407-1.786 1.551-3.614 6.695-13.953 12.05-18.254 2.923-2.348 6.19-3.75 8.74-3.75 1.19 0 2.099.297 2.701.883.661.644.997 1.689.997 3.105-.001 7.12-8.882 14.295-13.412 16.384z"/><path opacity=".5" fill="#fff" d="M35.876 29.126c-2.914 1.344-5.754 2.353-7.623 2.963-.067.021-.588.257-1.047.456-1.009-1.178-2.056-1.651-2.407-1.786 1.551-3.614 6.695-13.953 12.05-18.254 2.923-2.348 6.19-3.75 8.74-3.75 1.19 0 2.099.297 2.701.883.661.644.997 1.689.997 3.105-.001 7.12-8.882 14.295-13.412 16.384z"/><path d="M27.319 1.349c-6.476 4.63-8.276 16.778-7.868 22.259.304 4.054.967 7.67 1.332 9.451.509-.064 1.032-.05 1.559.072.132.055.27.093.411.113 1.403.187 1.584.793 1.607.946l-.01.012c0 .012.007.017.013.023.262-.176.538-.393.769-.655 0 0 9.431-10.768 10.814-20.173 1.379-9.372-2.437-16.475-8.628-12.049zm6.629 11.871c-.817 5.557-4.868 13.264-7.464 17.647l-4.162-.82a73.88 73.88 0 0 1-.852-6.807c-.362-4.856 1.317-16.084 6.844-20.036 1.1-.786 2.058-1.093 2.848-.91.718.167 1.346.744 1.869 1.715 1.116 2.08 1.46 5.524.917 9.212z"/><path opacity=".5" fill="#fff" d="M33.949 13.22c-.817 5.557-4.868 13.264-7.464 17.647l-4.162-.82a73.88 73.88 0 0 1-.852-6.807c-.362-4.856 1.317-16.084 6.844-20.036 1.1-.786 2.058-1.093 2.848-.91.718.167 1.346.744 1.869 1.715 1.116 2.08 1.46 5.524.917 9.212z"/></svg>
</svg>
</div>
CSS:
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
svg#bee_svg {
width: 100%;
padding: 40px 75px 40px 10px;
overflow: visible;
}
#snappy {
background-color: wheat;
position: relative;
display: block;
border: solid 1px #000;
}
JS：
// Html Viewbox Reference :viewBox="0 0 1200 700"
var s = Snap("#snappy");
var bee = $("#bee");
console.log(bee);
var vBW = 1200; // viewBoxWidth
var vBH = 700; // viewBoxHeight
function animate1(){
bee.animate({x: vBW-110}, 4000, animate2);
}
function animate2(){
bee.animate({x: 10}, 2000, animate1);
}
animate1();
我是 SVG 和动画的初学者，非常感谢任何帮助。
将其更改为以下内容，应该一切正常...
主要是使用 Snap("bee") 而不是 $("bee") 并在动画参数中包含一个“缓动”函数。
可以找到 animate 的文档here
var s = Snap("#snappy");
var bee = Snap("#bee");
var vBW = 1200; // viewBoxWidth
var vBH = 700; // viewBoxHeight
function animate1(){
bee.animate({x: vBW}, 4000, mina.linear, animate2);
}
function animate2(){
bee.animate({x: 10}, 2000, mina.linear, animate1);
}
animate1();
Ideally I would like to achieve an animation where the Bee is buzzing
around that canvas but for now I am simple trying to move it left to
right.
Live Demo
前半部分任务既可以借助JS库解决，也可以使用smil SVG解决
#1。蜜蜂水平和垂直运动动画
通过在 translate (X, Y) 命令中添加和更改坐标，您可以获得对象的水平和垂直运动的组合。
如果在动画命令的values属性中加入几对坐标 animateTransform，就可以得到任意形状的运动动画
<animateTransform attributeName="transform" type="translate" dur="30s" values="900,0;800,140;800,150;700,100; 610,160;610,150;610,150;610,160;610,150;600,160;610,330;610,300;610,330;685,470;685,470;560,520;570,530;570,530;480,340;480,330;480,340;400,400;400,400;330,220;330,220;280,180;250,80;225,365;
225,365;225,365;200,180;150,150;150,150;0,0;-100,-100"
fill="freeze"
repeatCount="indefinite" />
请全屏观看
<style>
#wing1 { opacity:0.6;}
#wing2 {opacity:0.75;}
</style>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="img-responsive" width="1200" height="700" viewBox="0 0 1200 700" version="1.1" >
<defs>
<linearGradient id="grad1" x1="0" x2="0" y1="0" y2="1">
<stop offset="0.5" stop-color="dodgerblue"/>
<stop offset="1" stop-color="gold"/>
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="url(#grad1)" />
<g id="bee" transform="translate(100,100)">
<g transform="matrix(0.26458,0,0,0.26458,-10.137,-3.944)">
<path d="m108.9 137.3c0-0.3 1.5-2.6 5.2-3.1 15.7-2.2 29.9 28.8 28.9 30.3-1 1.5-8.5 8.6-12.1 9.5-3.6 0.8-7.2 3.2-8.8 3.2-1.7-0.1-7.1 0.5-7.3-0.7-0.1-1.2-2.7-15.4-2.7-20 0-4.6-0.2-13.2-0.9-14.6-0.7-1.4-2.3-4.5-2.3-4.5z" fill="#fff"/>
<path d="m115.6 138.6c-3.2-3.6-9.8-6.9-18.8-4.6-9 2.3-24.6 13.4-24 31.9 0.5 18.6 10.7 29.8 13.7 32.2 1.8 1.5 3.6-1.1 6.2-4 0 0 0 0 0 0 0.7-0.7 3.9-4.8 5.7-6.7 3.9-4.2 8.9-15.8 8.9-15.8 0 0 0.1 7-5 16.4 7.5-4.8 19.8-15.8 21.2-24.8 2.2-13.6-4.8-21.1-7.9-24.6z"/>
<path d="m143 137.4c0 0 15.9-0.8 19.4 0 3.4 0.8 17.5 2.8 26.8 17.8 7 11.2 5.3 29.7 3.2 35.2-2 5.4-12.6 20.3-12.6 20.3l-18.8-11.8c-1.2-0.4-9.4-6.4-10.5-8.1-1.1-1.7-2.1-1.3-3.8-4.6-1.8-3.3-2.6-4.5-3.7-6.6-3.6-6.8-6-3.2-7.1-3.2h-4.6c0 0 7.2-22.7 5.9-28.5-1.3-5.8-4.3-12.9-4.3-12.9z" fill="#fc0"/>
<path d="m85.6 158c0 0-9.3-1-19.1 4.8-13 7.6-19.1 14.4-18.9 17.5 0.2 3.2 3.5 4.1 6.1 0.7 2.6-3.5 1.7-5.8 1.7-5.8 0 0 10.4-11.2 19.3-13.4 8.3-2.1 12.9-1.2 12.9-1.2l3.5-2.4z"/>
<path d="m91.3 149.8c-4.1 1-7.6 5-8.2 14.7-0.7 11.2-0.4 15.1 5.5 11.7 7.1-4.1 11.1-12.8 10.4-20.2-0.5-5-3.2-7.3-7.6-6.3z" fill="#fff"/>
<path d="m82.9 142.2c0 0-7.1-6.1-18.5-6.9-15-1.1-23.9 0.9-25.5 3.6-1.6 2.7 0.5 5.4 4.6 4 4.1-1.4 4.7-3.8 4.7-3.8 0 0 14.9-3.3 23.5 0 8 3 11.3 6.3 11.3 6.3h4.3zm28.3-6.9c0 0 13 0.5 17.1 10.2 9.1 21.4-13.8 31.6-13.8 31.6 0 0 18.6 4.9 26.4-2.4 7.8-7.3 14.4-20.9 5.1-34.4-9.3-13.5-24.1-13.5-34.7-4.9zm32.6 2.1c0 0 8.1-1.2 15.5 4.3 7.3 5.5 9.1 22.7 2.8 31.8-6.9 10-16.3 11-16.3 11l-4.2-7.1c0 0 12.7-6 14.5-16.5 1.8-10.5-2.5-20.7-12.4-23.6zm13.2-0.3c0 0 15.2 2.4 17.7 16.9 2.5 14.5-3.3 25-8.6 28.9-10.1 7.5-18.3 5-18.3 5 0 0 7 7.2 9.5 8.7 0.8 0.5 28.5-6.2 28-33.1-0.2-10.5-4-26.7-28.2-26.5zM187 152.2"/>
<path d="m187 152.2c0 0 9.1 21.1 2.3 33.3-7.1 12.6-15.9 15.5-21.6 15.1-4.6-0.3-4.4-0.5-4.4-0.5 0 0 13.6 14.4 14.4 19.9 0.8 5.5 0 1.7 2.1-2.3 2.1-4 15.9-11.7 17.5-29.4 1.5-17-1.6-24.5-10.3-36.1zm-61.2 25.3c0 0-0.2 4.2-1.1 7.1-0.9 2.8 0 3.8 1.1 8.3 1.1 4.5 1.7 7.8-0.8 9.5-2.5 1.7-2.1 2.7-2.5 1.7-0.4-0.9 0.3-1.4 1.1-3.4 0.8-2 1.5-3.8 0-7-1.5-3.2-4.2-6.1-3.6-10.4 0.3-2.1 0.9-4.9 0.9-4.9l1.5-1.9zm8.9-1.1c0.7 1.3 3.4 5.3 3.8 8.1 0.4 2.8-1.5 4.5-1.9 5.9-0.4 1.3-2.2 4.7 0 7.8 2.2 3 3.2 6.2 3.2 9.8 0 3.6 0.9 5.5 1.9 3.4 0.9-2.1 2.3-1.5 0-7-2.3-5.5-2.3-5.3-2.9-7.7-0.5-2.3 4.1-6.2 4.1-9.3 0.1-3.1-2.6-9.1-3.1-11-0.6-1.9-2.3-4.7-2.3-4.7zm14.8 12.7c0.6 0.6 5.5 9.1 4 16.5-1.5 7.4-4.4 12.9-1.8 16.3 2.6 3.4 6.2 7.4 6.9 7.6 0.8 0.2 1.9-1.1 1.3-2.1-0.6-0.9-2.8-2.6-4-5-1.3-2.6-2.8-5.2-1.1-8.2 1.7-3 3-7 3-9.7 0-2.6-0.1-4.3-0.3-7.7-0.2-3.4-2.7-7.6-2.7-7.6h-5.3zm-47.9-23.3c-1.7 4.8-6 7.7-9.6 6.4-3.6-1.3-5.2-6.2-3.6-11 1.7-4.8 6-7.7 9.6-6.4 3.6 1.3 5.2 6.2 3.6 11z"/>
<circle r="3.3" cy="161.2" cx="90.5" fill="#fff"/>
</g>
<g id="wing1">
<path d="M35.4 10.7C28 16.7 24.1 31.2 24.1 31.7a106.4 106.4 0 0 1 1.1 0.6c1.1 0.6 2.5 2.4 2.5 2.4l1-0.3 0 0c2-0.6 5-1.7 8.2-3.2C41.9 28.8 51.6 21.1 51.6 12.7 51.6 4.8 42.9 4.8 35.4 10.7Zm0.4 18.4c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" fill="#000"/>
<path id="inside-wing1" fill="#EAEAEA" d="m35.9 29.1c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" />
</g>
<g id="wing2">
<path id="wing2" d="m27.3 1.3c-6.5 4.6-8.3 16.8-7.9 22.3 0.3 4.1 1 7.7 1.3 9.5 0.5-0.1 1 0 1.6 0.1 0.1 0.1 0.3 0.1 0.4 0.1 1.4 0.2 1.6 0.8 1.6 0.9l0 0c0 0 0 0 0 0 0.3-0.2 0.5-0.4 0.8-0.7 0 0 9.4-10.8 10.8-20.2C37.3 4 33.5-3.1 27.3 1.3Zm6.6 11.9c-0.8 5.6-4.9 13.3-7.5 17.6l-4.2-0.8A73.9 73.9 0 0 1 21.5 23.2c-0.4-4.9 1.3-16.1 6.8-20 1.1-0.8 2.1-1.1 2.8-0.9 0.7 0.2 1.3 0.7 1.9 1.7 1.1 2.1 1.5 5.5 0.9 9.2z" fill="#EAEAEA"/>
</g>
<animateTransform attributeName="transform" type="translate" dur="20s" values="900,0;800,140;800,150;700,100; 610,160;610,150;610,150;610,160;610,150;600,160;610,330;610,300;610,330;685,470;685,470;560,520;570,530;570,530;480,340;480,330;480,340;400,400;400,400;330,220;330,220;280,180;250,80;225,365;
225,365;225,365;200,180;150,150;150,150;0,0;-100,-100"
fill="freeze"
repeatCount="indefinite" />
</g>
</svg>
#2。蜜蜂翅膀动画
为了使机翼正确旋转（无水平位移），需要选择正确的旋转中心
注意蜜蜂和它的翅膀的形象。
旋转中心的正确选择将是蜜蜂翅膀周围矩形的左角
在这种情况下，CSS 规则为：
transform-origin: bottom left;
transform-box: fill-box;
下面是蜜蜂翅膀的动画：
#wing1 {
transform-origin: bottom left;
transform-box: fill-box;
opacity:0.6;
animation: rotateBox1 .2s infinite;
}
@keyframes rotateBox1 {
0%{ transform:rotate(0deg); }
50%{ transform:rotate(-60deg); }
0%{ transform:rotate(0deg); }
}
#wing2 {
transform-origin: bottom left;
transform-box: fill-box;
opacity:0.75;
animation: rotateBox2 .2s infinite;
}
@keyframes rotateBox2 {
0%{ transform:rotate(0deg); }
50%{ transform:rotate(30deg); }
0%{ transform:rotate(0deg); }
}
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="img-responsive" width="1200" height="700" viewBox="0 0 1200 700" version="1.1" >
<rect width="100%" height="100%" fill="#39D594" />
<g id="bee" transform="scale(4) translate(100,50)">
<g transform="matrix(0.26458,0,0,0.26458,-10.137,-3.944)">
<path d="m108.9 137.3c0-0.3 1.5-2.6 5.2-3.1 15.7-2.2 29.9 28.8 28.9 30.3-1 1.5-8.5 8.6-12.1 9.5-3.6 0.8-7.2 3.2-8.8 3.2-1.7-0.1-7.1 0.5-7.3-0.7-0.1-1.2-2.7-15.4-2.7-20 0-4.6-0.2-13.2-0.9-14.6-0.7-1.4-2.3-4.5-2.3-4.5z" fill="#fff"/>
<path d="m115.6 138.6c-3.2-3.6-9.8-6.9-18.8-4.6-9 2.3-24.6 13.4-24 31.9 0.5 18.6 10.7 29.8 13.7 32.2 1.8 1.5 3.6-1.1 6.2-4 0 0 0 0 0 0 0.7-0.7 3.9-4.8 5.7-6.7 3.9-4.2 8.9-15.8 8.9-15.8 0 0 0.1 7-5 16.4 7.5-4.8 19.8-15.8 21.2-24.8 2.2-13.6-4.8-21.1-7.9-24.6z"/>
<path d="m143 137.4c0 0 15.9-0.8 19.4 0 3.4 0.8 17.5 2.8 26.8 17.8 7 11.2 5.3 29.7 3.2 35.2-2 5.4-12.6 20.3-12.6 20.3l-18.8-11.8c-1.2-0.4-9.4-6.4-10.5-8.1-1.1-1.7-2.1-1.3-3.8-4.6-1.8-3.3-2.6-4.5-3.7-6.6-3.6-6.8-6-3.2-7.1-3.2h-4.6c0 0 7.2-22.7 5.9-28.5-1.3-5.8-4.3-12.9-4.3-12.9z" fill="#fc0"/>
<path d="m85.6 158c0 0-9.3-1-19.1 4.8-13 7.6-19.1 14.4-18.9 17.5 0.2 3.2 3.5 4.1 6.1 0.7 2.6-3.5 1.7-5.8 1.7-5.8 0 0 10.4-11.2 19.3-13.4 8.3-2.1 12.9-1.2 12.9-1.2l3.5-2.4z"/>
<path d="m91.3 149.8c-4.1 1-7.6 5-8.2 14.7-0.7 11.2-0.4 15.1 5.5 11.7 7.1-4.1 11.1-12.8 10.4-20.2-0.5-5-3.2-7.3-7.6-6.3z" fill="#fff"/>
<path d="m82.9 142.2c0 0-7.1-6.1-18.5-6.9-15-1.1-23.9 0.9-25.5 3.6-1.6 2.7 0.5 5.4 4.6 4 4.1-1.4 4.7-3.8 4.7-3.8 0 0 14.9-3.3 23.5 0 8 3 11.3 6.3 11.3 6.3h4.3zm28.3-6.9c0 0 13 0.5 17.1 10.2 9.1 21.4-13.8 31.6-13.8 31.6 0 0 18.6 4.9 26.4-2.4 7.8-7.3 14.4-20.9 5.1-34.4-9.3-13.5-24.1-13.5-34.7-4.9zm32.6 2.1c0 0 8.1-1.2 15.5 4.3 7.3 5.5 9.1 22.7 2.8 31.8-6.9 10-16.3 11-16.3 11l-4.2-7.1c0 0 12.7-6 14.5-16.5 1.8-10.5-2.5-20.7-12.4-23.6zm13.2-0.3c0 0 15.2 2.4 17.7 16.9 2.5 14.5-3.3 25-8.6 28.9-10.1 7.5-18.3 5-18.3 5 0 0 7 7.2 9.5 8.7 0.8 0.5 28.5-6.2 28-33.1-0.2-10.5-4-26.7-28.2-26.5zM187 152.2"/>
<path d="m187 152.2c0 0 9.1 21.1 2.3 33.3-7.1 12.6-15.9 15.5-21.6 15.1-4.6-0.3-4.4-0.5-4.4-0.5 0 0 13.6 14.4 14.4 19.9 0.8 5.5 0 1.7 2.1-2.3 2.1-4 15.9-11.7 17.5-29.4 1.5-17-1.6-24.5-10.3-36.1zm-61.2 25.3c0 0-0.2 4.2-1.1 7.1-0.9 2.8 0 3.8 1.1 8.3 1.1 4.5 1.7 7.8-0.8 9.5-2.5 1.7-2.1 2.7-2.5 1.7-0.4-0.9 0.3-1.4 1.1-3.4 0.8-2 1.5-3.8 0-7-1.5-3.2-4.2-6.1-3.6-10.4 0.3-2.1 0.9-4.9 0.9-4.9l1.5-1.9zm8.9-1.1c0.7 1.3 3.4 5.3 3.8 8.1 0.4 2.8-1.5 4.5-1.9 5.9-0.4 1.3-2.2 4.7 0 7.8 2.2 3 3.2 6.2 3.2 9.8 0 3.6 0.9 5.5 1.9 3.4 0.9-2.1 2.3-1.5 0-7-2.3-5.5-2.3-5.3-2.9-7.7-0.5-2.3 4.1-6.2 4.1-9.3 0.1-3.1-2.6-9.1-3.1-11-0.6-1.9-2.3-4.7-2.3-4.7zm14.8 12.7c0.6 0.6 5.5 9.1 4 16.5-1.5 7.4-4.4 12.9-1.8 16.3 2.6 3.4 6.2 7.4 6.9 7.6 0.8 0.2 1.9-1.1 1.3-2.1-0.6-0.9-2.8-2.6-4-5-1.3-2.6-2.8-5.2-1.1-8.2 1.7-3 3-7 3-9.7 0-2.6-0.1-4.3-0.3-7.7-0.2-3.4-2.7-7.6-2.7-7.6h-5.3zm-47.9-23.3c-1.7 4.8-6 7.7-9.6 6.4-3.6-1.3-5.2-6.2-3.6-11 1.7-4.8 6-7.7 9.6-6.4 3.6 1.3 5.2 6.2 3.6 11z"/>
<circle r="3.3" cy="161.2" cx="90.5" fill="#fff"/>
</g>
<g id="wing1">
<path d="M35.4 10.7C28 16.7 24.1 31.2 24.1 31.7a106.4 106.4 0 0 1 1.1 0.6c1.1 0.6 2.5 2.4 2.5 2.4l1-0.3 0 0c2-0.6 5-1.7 8.2-3.2C41.9 28.8 51.6 21.1 51.6 12.7 51.6 4.8 42.9 4.8 35.4 10.7Zm0.4 18.4c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" fill="#000"/>
<path id="inside-wing1" fill="#EAEAEA" d="m35.9 29.1c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" />
</g>
<g id="wing2">
<path id="wing2" d="m27.3 1.3c-6.5 4.6-8.3 16.8-7.9 22.3 0.3 4.1 1 7.7 1.3 9.5 0.5-0.1 1 0 1.6 0.1 0.1 0.1 0.3 0.1 0.4 0.1 1.4 0.2 1.6 0.8 1.6 0.9l0 0c0 0 0 0 0 0 0.3-0.2 0.5-0.4 0.8-0.7 0 0 9.4-10.8 10.8-20.2C37.3 4 33.5-3.1 27.3 1.3Zm6.6 11.9c-0.8 5.6-4.9 13.3-7.5 17.6l-4.2-0.8A73.9 73.9 0 0 1 21.5 23.2c-0.4-4.9 1.3-16.1 6.8-20 1.1-0.8 2.1-1.1 2.8-0.9 0.7 0.2 1.3 0.7 1.9 1.7 1.1 2.1 1.5 5.5 0.9 9.2z" fill="#000"/>
</g>
</g>
</svg>
3。组合翅膀移动和旋转动画
--
为了真实，添加一张盛开的草地图片
<image xlink:href="https://i.stack.imgur.com/DUxlZ.jpg" x="-100" width="1200" height="700" />
要实现蜜蜂停在花上时的暂停，相应的坐标对
<animateTransform values =" ... 610,150; 610,150; 610,150; ... " 重复
下面是完整的应用代码：
点击后开始动画
#wing1 {
transform-origin: bottom left;
transform-box: fill-box;
opacity:0.6;
animation: rotateBox1 .15s infinite;
}
@keyframes rotateBox1 {
0%{ transform:rotate(0deg); }
50%{ transform:rotate(-60deg); }
0%{ transform:rotate(0deg); }
}
#wing2 {
transform-origin: bottom left;
transform-box: fill-box;
opacity:0.75;
animation: rotateBox2 .15s infinite;
}
@keyframes rotateBox2 {
0%{ transform:rotate(0deg); }
50%{ transform:rotate(30deg); }
0%{ transform:rotate(0deg); }
}
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="img-responsive" width="1200" height="700" viewBox="0 0 1200 700" version="1.1" >
<image xlink:href="https://i.stack.imgur.com/DUxlZ.jpg" x="-100" width="1200" height="700" />
<g id="bee" transform="translate(1400,100)">
<g transform="matrix(0.26458,0,0,0.26458,-10.137,-3.944)">
<path d="m108.9 137.3c0-0.3 1.5-2.6 5.2-3.1 15.7-2.2 29.9 28.8 28.9 30.3-1 1.5-8.5 8.6-12.1 9.5-3.6 0.8-7.2 3.2-8.8 3.2-1.7-0.1-7.1 0.5-7.3-0.7-0.1-1.2-2.7-15.4-2.7-20 0-4.6-0.2-13.2-0.9-14.6-0.7-1.4-2.3-4.5-2.3-4.5z" fill="#fff"/>
<path d="m115.6 138.6c-3.2-3.6-9.8-6.9-18.8-4.6-9 2.3-24.6 13.4-24 31.9 0.5 18.6 10.7 29.8 13.7 32.2 1.8 1.5 3.6-1.1 6.2-4 0 0 0 0 0 0 0.7-0.7 3.9-4.8 5.7-6.7 3.9-4.2 8.9-15.8 8.9-15.8 0 0 0.1 7-5 16.4 7.5-4.8 19.8-15.8 21.2-24.8 2.2-13.6-4.8-21.1-7.9-24.6z"/>
<path d="m143 137.4c0 0 15.9-0.8 19.4 0 3.4 0.8 17.5 2.8 26.8 17.8 7 11.2 5.3 29.7 3.2 35.2-2 5.4-12.6 20.3-12.6 20.3l-18.8-11.8c-1.2-0.4-9.4-6.4-10.5-8.1-1.1-1.7-2.1-1.3-3.8-4.6-1.8-3.3-2.6-4.5-3.7-6.6-3.6-6.8-6-3.2-7.1-3.2h-4.6c0 0 7.2-22.7 5.9-28.5-1.3-5.8-4.3-12.9-4.3-12.9z" fill="#fc0"/>
<path d="m85.6 158c0 0-9.3-1-19.1 4.8-13 7.6-19.1 14.4-18.9 17.5 0.2 3.2 3.5 4.1 6.1 0.7 2.6-3.5 1.7-5.8 1.7-5.8 0 0 10.4-11.2 19.3-13.4 8.3-2.1 12.9-1.2 12.9-1.2l3.5-2.4z"/>
<path d="m91.3 149.8c-4.1 1-7.6 5-8.2 14.7-0.7 11.2-0.4 15.1 5.5 11.7 7.1-4.1 11.1-12.8 10.4-20.2-0.5-5-3.2-7.3-7.6-6.3z" fill="#fff"/>
<path d="m82.9 142.2c0 0-7.1-6.1-18.5-6.9-15-1.1-23.9 0.9-25.5 3.6-1.6 2.7 0.5 5.4 4.6 4 4.1-1.4 4.7-3.8 4.7-3.8 0 0 14.9-3.3 23.5 0 8 3 11.3 6.3 11.3 6.3h4.3zm28.3-6.9c0 0 13 0.5 17.1 10.2 9.1 21.4-13.8 31.6-13.8 31.6 0 0 18.6 4.9 26.4-2.4 7.8-7.3 14.4-20.9 5.1-34.4-9.3-13.5-24.1-13.5-34.7-4.9zm32.6 2.1c0 0 8.1-1.2 15.5 4.3 7.3 5.5 9.1 22.7 2.8 31.8-6.9 10-16.3 11-16.3 11l-4.2-7.1c0 0 12.7-6 14.5-16.5 1.8-10.5-2.5-20.7-12.4-23.6zm13.2-0.3c0 0 15.2 2.4 17.7 16.9 2.5 14.5-3.3 25-8.6 28.9-10.1 7.5-18.3 5-18.3 5 0 0 7 7.2 9.5 8.7 0.8 0.5 28.5-6.2 28-33.1-0.2-10.5-4-26.7-28.2-26.5zM187 152.2"/>
<path d="m187 152.2c0 0 9.1 21.1 2.3 33.3-7.1 12.6-15.9 15.5-21.6 15.1-4.6-0.3-4.4-0.5-4.4-0.5 0 0 13.6 14.4 14.4 19.9 0.8 5.5 0 1.7 2.1-2.3 2.1-4 15.9-11.7 17.5-29.4 1.5-17-1.6-24.5-10.3-36.1zm-61.2 25.3c0 0-0.2 4.2-1.1 7.1-0.9 2.8 0 3.8 1.1 8.3 1.1 4.5 1.7 7.8-0.8 9.5-2.5 1.7-2.1 2.7-2.5 1.7-0.4-0.9 0.3-1.4 1.1-3.4 0.8-2 1.5-3.8 0-7-1.5-3.2-4.2-6.1-3.6-10.4 0.3-2.1 0.9-4.9 0.9-4.9l1.5-1.9zm8.9-1.1c0.7 1.3 3.4 5.3 3.8 8.1 0.4 2.8-1.5 4.5-1.9 5.9-0.4 1.3-2.2 4.7 0 7.8 2.2 3 3.2 6.2 3.2 9.8 0 3.6 0.9 5.5 1.9 3.4 0.9-2.1 2.3-1.5 0-7-2.3-5.5-2.3-5.3-2.9-7.7-0.5-2.3 4.1-6.2 4.1-9.3 0.1-3.1-2.6-9.1-3.1-11-0.6-1.9-2.3-4.7-2.3-4.7zm14.8 12.7c0.6 0.6 5.5 9.1 4 16.5-1.5 7.4-4.4 12.9-1.8 16.3 2.6 3.4 6.2 7.4 6.9 7.6 0.8 0.2 1.9-1.1 1.3-2.1-0.6-0.9-2.8-2.6-4-5-1.3-2.6-2.8-5.2-1.1-8.2 1.7-3 3-7 3-9.7 0-2.6-0.1-4.3-0.3-7.7-0.2-3.4-2.7-7.6-2.7-7.6h-5.3zm-47.9-23.3c-1.7 4.8-6 7.7-9.6 6.4-3.6-1.3-5.2-6.2-3.6-11 1.7-4.8 6-7.7 9.6-6.4 3.6 1.3 5.2 6.2 3.6 11z"/>
<circle r="3.3" cy="161.2" cx="90.5" fill="#fff"/>
</g>
<g id="wing1">
<path d="M35.4 10.7C28 16.7 24.1 31.2 24.1 31.7a106.4 106.4 0 0 1 1.1 0.6c1.1 0.6 2.5 2.4 2.5 2.4l1-0.3 0 0c2-0.6 5-1.7 8.2-3.2C41.9 28.8 51.6 21.1 51.6 12.7 51.6 4.8 42.9 4.8 35.4 10.7Zm0.4 18.4c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" fill="#000"/>
<path id="inside-wing1" fill="#EAEAEA" d="m35.9 29.1c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" />
</g>
<g id="wing2">
<path id="wing2" d="m27.3 1.3c-6.5 4.6-8.3 16.8-7.9 22.3 0.3 4.1 1 7.7 1.3 9.5 0.5-0.1 1 0 1.6 0.1 0.1 0.1 0.3 0.1 0.4 0.1 1.4 0.2 1.6 0.8 1.6 0.9l0 0c0 0 0 0 0 0 0.3-0.2 0.5-0.4 0.8-0.7 0 0 9.4-10.8 10.8-20.2C37.3 4 33.5-3.1 27.3 1.3Zm6.6 11.9c-0.8 5.6-4.9 13.3-7.5 17.6l-4.2-0.8A73.9 73.9 0 0 1 21.5 23.2c-0.4-4.9 1.3-16.1 6.8-20 1.1-0.8 2.1-1.1 2.8-0.9 0.7 0.2 1.3 0.7 1.9 1.7 1.1 2.1 1.5 5.5 0.9 9.2z" fill="#000"/>
</g>
<!-- Bee moving animation -->
<animateTransform attributeName="transform" type="translate" begin="svg1.click" dur="30s" values="900,0;800,140;800,150;700,100; 610,160;610,150;610,150;610,160;610,150;600,160;610,330;610,300;610,330;685,470;685,470;560,520;570,530;570,530;480,340;480,330;480,340;400,400;400,400;330,220;330,220;280,180;250,80;225,365;
225,365;225,365;200,180;150,150;150,150;0,0;-100,-100"
fill="freeze"
repeatCount="indefinite" />
</g>
<text x="200" y="30" font-size="24px" fill="white">Click me </text>
</svg>
如你所见codepen, there is a simple Bee SVG in a SVG canvas. Ideally I would like to achieve an animation where the Bee is buzzing around that canvas but for now I am simple trying to move it left to right. The library I am using is snap.svg
我的基础是这个codepen，但不知何故我无法让它工作。
HTML:
<div class="wrapper">
<svg id='snappy' class='img-responsive' viewBox="0 0 1200 700">
<svg id="bee" x="100" y="100" xmlns="http://www.w3.org/2000/svg" width="194.874" height="214.536" viewBox="0 0 51.56 56.763" xmlns:v="https://vecta.io/nano"><g transform="matrix(.26458 0 0 .26458 -10.137 -3.944)"><path fill="#fff" d="M108.859 137.318c0-.324 1.515-2.606 5.195-3.131 15.73-2.247 29.851 28.808 28.898 30.272s-8.497 8.627-12.098 9.47-7.162 3.217-8.822 3.153-7.139.542-7.277-.674-2.669-15.399-2.669-20.033-.242-13.202-.894-14.606-2.333-4.451-2.333-4.451z"/><path d="M115.581 138.635c-3.242-3.606-9.84-6.911-18.839-4.642-8.959 2.259-24.573 13.377-24.026 31.944s10.65 29.76 13.653 32.217c1.802 1.475 3.643-1.105 6.233-3.991 0 0 .012-.012.016-.014.656-.73 3.949-4.837 5.688-6.711 3.894-4.197 8.938-15.764 8.938-15.764s.121 6.998-4.97 16.378c7.493-4.812 19.774-15.761 21.227-24.845 2.177-13.618-4.84-21.147-7.92-24.572z"/><path fill="#fc0" d="M142.953 137.434s15.938-.781 19.384-.001 17.452 2.778 26.807 17.822c6.952 11.178 5.257 29.734 3.236 35.164s-12.588 20.325-12.588 20.325l-18.78-11.803c-1.198-.405-9.44-6.392-10.494-8.12s-2.08-1.278-3.834-4.566-2.604-4.525-3.73-6.645c-3.598-6.759-5.988-3.201-7.124-3.201h-4.647s7.174-22.721 5.91-28.527-4.292-12.923-4.292-12.923z"/><path d="M85.567 157.957s-9.254-.959-19.146 4.846c-12.967 7.611-19.118 14.352-18.914 17.524s3.506 4.138 6.089.675 1.656-5.792 1.656-5.792 10.388-11.165 19.302-13.371c8.325-2.058 12.872-1.2 12.872-1.2l3.535-2.447z"/><path fill="#fff" d="M91.283 149.83c-4.109.951-7.615 5.01-8.191 14.743-.663 11.188-.379 15.107 5.461 11.739 7.098-4.094 11.098-12.776 10.375-20.203-.482-4.96-3.166-7.316-7.645-6.279z"/><path d="M82.887 142.196s-7.062-6.058-18.5-6.918c-14.993-1.129-23.886.911-25.525 3.636s.526 5.396 4.621 4.021 4.66-3.816 4.66-3.816 14.896-3.265 23.48 0c8.015 3.049 11.264 6.343 11.264 6.343h4.298zm28.306-6.894s12.977.547 17.062 10.158c9.112 21.432-13.789 31.615-13.789 31.615s18.582 4.889 26.41-2.433 14.39-20.897 5.05-34.432-24.13-13.539-34.733-4.908zm32.594 2.132s8.118-1.225 15.521 4.325c7.321 5.491 9.132 22.7 2.84 31.809-6.929 10.029-16.283 10.982-16.283 10.982l-4.166-7.069s12.689-5.993 14.452-16.489c1.766-10.514-2.513-20.688-12.364-23.558zm13.201-.342s15.168 2.447 17.655 16.897c2.5 14.514-3.343 24.952-8.627 28.904-10.062 7.525-18.28 5.037-18.28 5.037s7.009 7.176 9.488 8.738c.802.504 28.466-6.25 27.96-33.058-.198-10.489-3.961-26.677-28.196-26.518z"/><path d="M186.951 152.173s9.127 21.085 2.271 33.324c-7.053 12.591-15.904 15.479-21.584 15.115-4.598-.294-4.355-.536-4.355-.536s13.573 14.39 14.36 19.881.03 1.704 2.112-2.271 15.938-11.729 17.538-29.422c1.541-17.03-1.632-24.541-10.342-36.091zm-61.158 25.308s-.189 4.229-1.136 7.069 0 3.787 1.136 8.331 1.692 7.763-.764 9.467-2.076 2.65-2.455 1.704.343-1.391 1.118-3.441 1.497-3.754 0-6.973-4.242-6.059-3.58-10.448c.311-2.061.947-4.895.947-4.895l1.515-1.888zm8.9-1.072c.739 1.332 3.407 5.302 3.786 8.142s-1.515 4.542-1.894 5.868-2.225 4.735.024 7.765 3.194 6.248 3.194 9.845.947 5.491 1.894 3.408 2.272-1.521 0-7.008-2.343-5.346-2.875-7.689 4.059-6.222 4.13-9.3-2.58-9.137-3.148-11.031-2.271-4.733-2.271-4.733zm14.771 12.684c.567.566 5.518 9.09 3.987 16.474s-4.44 12.875-1.849 16.283 6.189 7.385 6.946 7.574 1.894-1.137 1.325-2.083-2.777-2.648-4.023-5.018c-1.343-2.557-2.811-5.207-1.106-8.236s3.048-7.012 3.048-9.66-.113-4.288-.303-7.696-2.745-7.639-2.745-7.639h-5.28zm-47.853-23.281c-1.666 4.811-5.958 7.689-9.585 6.43s-5.219-6.174-3.551-10.983 5.959-7.689 9.586-6.43 5.219 6.173 3.55 10.983z"/><circle fill="#fff" cx="90.466" cy="161.179" r="3.281"/></g><path d="M35.427 10.733c-7.454 5.988-11.371 20.431-11.371 20.945a106.44 106.44 0 0 1 1.077.619c1.077.621 2.482 2.378 2.482 2.378l1.029-.323-.001-.001c1.971-.633 5.014-1.7 8.184-3.161 5.113-2.358 14.732-10.106 14.733-18.447.001-7.975-8.706-7.975-16.133-2.009zm.449 18.393c-2.914 1.344-5.754 2.353-7.623 2.963-.067.021-.588.257-1.047.456-1.009-1.178-2.056-1.651-2.407-1.786 1.551-3.614 6.695-13.953 12.05-18.254 2.923-2.348 6.19-3.75 8.74-3.75 1.19 0 2.099.297 2.701.883.661.644.997 1.689.997 3.105-.001 7.12-8.882 14.295-13.412 16.384z"/><path opacity=".5" fill="#fff" d="M35.876 29.126c-2.914 1.344-5.754 2.353-7.623 2.963-.067.021-.588.257-1.047.456-1.009-1.178-2.056-1.651-2.407-1.786 1.551-3.614 6.695-13.953 12.05-18.254 2.923-2.348 6.19-3.75 8.74-3.75 1.19 0 2.099.297 2.701.883.661.644.997 1.689.997 3.105-.001 7.12-8.882 14.295-13.412 16.384z"/><path d="M27.319 1.349c-6.476 4.63-8.276 16.778-7.868 22.259.304 4.054.967 7.67 1.332 9.451.509-.064 1.032-.05 1.559.072.132.055.27.093.411.113 1.403.187 1.584.793 1.607.946l-.01.012c0 .012.007.017.013.023.262-.176.538-.393.769-.655 0 0 9.431-10.768 10.814-20.173 1.379-9.372-2.437-16.475-8.628-12.049zm6.629 11.871c-.817 5.557-4.868 13.264-7.464 17.647l-4.162-.82a73.88 73.88 0 0 1-.852-6.807c-.362-4.856 1.317-16.084 6.844-20.036 1.1-.786 2.058-1.093 2.848-.91.718.167 1.346.744 1.869 1.715 1.116 2.08 1.46 5.524.917 9.212z"/><path opacity=".5" fill="#fff" d="M33.949 13.22c-.817 5.557-4.868 13.264-7.464 17.647l-4.162-.82a73.88 73.88 0 0 1-.852-6.807c-.362-4.856 1.317-16.084 6.844-20.036 1.1-.786 2.058-1.093 2.848-.91.718.167 1.346.744 1.869 1.715 1.116 2.08 1.46 5.524.917 9.212z"/></svg>
</svg>
</div>
CSS:
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
svg#bee_svg {
width: 100%;
padding: 40px 75px 40px 10px;
overflow: visible;
}
#snappy {
background-color: wheat;
position: relative;
display: block;
border: solid 1px #000;
}
JS：
// Html Viewbox Reference :viewBox="0 0 1200 700"
var s = Snap("#snappy");
var bee = $("#bee");
console.log(bee);
var vBW = 1200; // viewBoxWidth
var vBH = 700; // viewBoxHeight
function animate1(){
bee.animate({x: vBW-110}, 4000, animate2);
}
function animate2(){
bee.animate({x: 10}, 2000, animate1);
}
animate1();
我是 SVG 和动画的初学者，非常感谢任何帮助。
将其更改为以下内容，应该一切正常...
主要是使用 Snap("bee") 而不是 $("bee") 并在动画参数中包含一个“缓动”函数。
可以找到 animate 的文档here
var s = Snap("#snappy");
var bee = Snap("#bee");
var vBW = 1200; // viewBoxWidth
var vBH = 700; // viewBoxHeight
function animate1(){
bee.animate({x: vBW}, 4000, mina.linear, animate2);
}
function animate2(){
bee.animate({x: 10}, 2000, mina.linear, animate1);
}
animate1();
Ideally I would like to achieve an animation where the Bee is buzzing around that canvas but for now I am simple trying to move it left to right.
Live Demo
前半部分任务既可以借助JS库解决，也可以使用smil SVG解决
#1。蜜蜂水平和垂直运动动画
通过在 translate (X, Y) 命令中添加和更改坐标，您可以获得对象的水平和垂直运动的组合。
如果在动画命令的values属性中加入几对坐标 animateTransform，就可以得到任意形状的运动动画
<animateTransform attributeName="transform" type="translate" dur="30s" values="900,0;800,140;800,150;700,100; 610,160;610,150;610,150;610,160;610,150;600,160;610,330;610,300;610,330;685,470;685,470;560,520;570,530;570,530;480,340;480,330;480,340;400,400;400,400;330,220;330,220;280,180;250,80;225,365;
225,365;225,365;200,180;150,150;150,150;0,0;-100,-100"
fill="freeze"
repeatCount="indefinite" />
请全屏观看
<style>
#wing1 { opacity:0.6;}
#wing2 {opacity:0.75;}
</style>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="img-responsive" width="1200" height="700" viewBox="0 0 1200 700" version="1.1" >
<defs>
<linearGradient id="grad1" x1="0" x2="0" y1="0" y2="1">
<stop offset="0.5" stop-color="dodgerblue"/>
<stop offset="1" stop-color="gold"/>
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="url(#grad1)" />
<g id="bee" transform="translate(100,100)">
<g transform="matrix(0.26458,0,0,0.26458,-10.137,-3.944)">
<path d="m108.9 137.3c0-0.3 1.5-2.6 5.2-3.1 15.7-2.2 29.9 28.8 28.9 30.3-1 1.5-8.5 8.6-12.1 9.5-3.6 0.8-7.2 3.2-8.8 3.2-1.7-0.1-7.1 0.5-7.3-0.7-0.1-1.2-2.7-15.4-2.7-20 0-4.6-0.2-13.2-0.9-14.6-0.7-1.4-2.3-4.5-2.3-4.5z" fill="#fff"/>
<path d="m115.6 138.6c-3.2-3.6-9.8-6.9-18.8-4.6-9 2.3-24.6 13.4-24 31.9 0.5 18.6 10.7 29.8 13.7 32.2 1.8 1.5 3.6-1.1 6.2-4 0 0 0 0 0 0 0.7-0.7 3.9-4.8 5.7-6.7 3.9-4.2 8.9-15.8 8.9-15.8 0 0 0.1 7-5 16.4 7.5-4.8 19.8-15.8 21.2-24.8 2.2-13.6-4.8-21.1-7.9-24.6z"/>
<path d="m143 137.4c0 0 15.9-0.8 19.4 0 3.4 0.8 17.5 2.8 26.8 17.8 7 11.2 5.3 29.7 3.2 35.2-2 5.4-12.6 20.3-12.6 20.3l-18.8-11.8c-1.2-0.4-9.4-6.4-10.5-8.1-1.1-1.7-2.1-1.3-3.8-4.6-1.8-3.3-2.6-4.5-3.7-6.6-3.6-6.8-6-3.2-7.1-3.2h-4.6c0 0 7.2-22.7 5.9-28.5-1.3-5.8-4.3-12.9-4.3-12.9z" fill="#fc0"/>
<path d="m85.6 158c0 0-9.3-1-19.1 4.8-13 7.6-19.1 14.4-18.9 17.5 0.2 3.2 3.5 4.1 6.1 0.7 2.6-3.5 1.7-5.8 1.7-5.8 0 0 10.4-11.2 19.3-13.4 8.3-2.1 12.9-1.2 12.9-1.2l3.5-2.4z"/>
<path d="m91.3 149.8c-4.1 1-7.6 5-8.2 14.7-0.7 11.2-0.4 15.1 5.5 11.7 7.1-4.1 11.1-12.8 10.4-20.2-0.5-5-3.2-7.3-7.6-6.3z" fill="#fff"/>
<path d="m82.9 142.2c0 0-7.1-6.1-18.5-6.9-15-1.1-23.9 0.9-25.5 3.6-1.6 2.7 0.5 5.4 4.6 4 4.1-1.4 4.7-3.8 4.7-3.8 0 0 14.9-3.3 23.5 0 8 3 11.3 6.3 11.3 6.3h4.3zm28.3-6.9c0 0 13 0.5 17.1 10.2 9.1 21.4-13.8 31.6-13.8 31.6 0 0 18.6 4.9 26.4-2.4 7.8-7.3 14.4-20.9 5.1-34.4-9.3-13.5-24.1-13.5-34.7-4.9zm32.6 2.1c0 0 8.1-1.2 15.5 4.3 7.3 5.5 9.1 22.7 2.8 31.8-6.9 10-16.3 11-16.3 11l-4.2-7.1c0 0 12.7-6 14.5-16.5 1.8-10.5-2.5-20.7-12.4-23.6zm13.2-0.3c0 0 15.2 2.4 17.7 16.9 2.5 14.5-3.3 25-8.6 28.9-10.1 7.5-18.3 5-18.3 5 0 0 7 7.2 9.5 8.7 0.8 0.5 28.5-6.2 28-33.1-0.2-10.5-4-26.7-28.2-26.5zM187 152.2"/>
<path d="m187 152.2c0 0 9.1 21.1 2.3 33.3-7.1 12.6-15.9 15.5-21.6 15.1-4.6-0.3-4.4-0.5-4.4-0.5 0 0 13.6 14.4 14.4 19.9 0.8 5.5 0 1.7 2.1-2.3 2.1-4 15.9-11.7 17.5-29.4 1.5-17-1.6-24.5-10.3-36.1zm-61.2 25.3c0 0-0.2 4.2-1.1 7.1-0.9 2.8 0 3.8 1.1 8.3 1.1 4.5 1.7 7.8-0.8 9.5-2.5 1.7-2.1 2.7-2.5 1.7-0.4-0.9 0.3-1.4 1.1-3.4 0.8-2 1.5-3.8 0-7-1.5-3.2-4.2-6.1-3.6-10.4 0.3-2.1 0.9-4.9 0.9-4.9l1.5-1.9zm8.9-1.1c0.7 1.3 3.4 5.3 3.8 8.1 0.4 2.8-1.5 4.5-1.9 5.9-0.4 1.3-2.2 4.7 0 7.8 2.2 3 3.2 6.2 3.2 9.8 0 3.6 0.9 5.5 1.9 3.4 0.9-2.1 2.3-1.5 0-7-2.3-5.5-2.3-5.3-2.9-7.7-0.5-2.3 4.1-6.2 4.1-9.3 0.1-3.1-2.6-9.1-3.1-11-0.6-1.9-2.3-4.7-2.3-4.7zm14.8 12.7c0.6 0.6 5.5 9.1 4 16.5-1.5 7.4-4.4 12.9-1.8 16.3 2.6 3.4 6.2 7.4 6.9 7.6 0.8 0.2 1.9-1.1 1.3-2.1-0.6-0.9-2.8-2.6-4-5-1.3-2.6-2.8-5.2-1.1-8.2 1.7-3 3-7 3-9.7 0-2.6-0.1-4.3-0.3-7.7-0.2-3.4-2.7-7.6-2.7-7.6h-5.3zm-47.9-23.3c-1.7 4.8-6 7.7-9.6 6.4-3.6-1.3-5.2-6.2-3.6-11 1.7-4.8 6-7.7 9.6-6.4 3.6 1.3 5.2 6.2 3.6 11z"/>
<circle r="3.3" cy="161.2" cx="90.5" fill="#fff"/>
</g>
<g id="wing1">
<path d="M35.4 10.7C28 16.7 24.1 31.2 24.1 31.7a106.4 106.4 0 0 1 1.1 0.6c1.1 0.6 2.5 2.4 2.5 2.4l1-0.3 0 0c2-0.6 5-1.7 8.2-3.2C41.9 28.8 51.6 21.1 51.6 12.7 51.6 4.8 42.9 4.8 35.4 10.7Zm0.4 18.4c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" fill="#000"/>
<path id="inside-wing1" fill="#EAEAEA" d="m35.9 29.1c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" />
</g>
<g id="wing2">
<path id="wing2" d="m27.3 1.3c-6.5 4.6-8.3 16.8-7.9 22.3 0.3 4.1 1 7.7 1.3 9.5 0.5-0.1 1 0 1.6 0.1 0.1 0.1 0.3 0.1 0.4 0.1 1.4 0.2 1.6 0.8 1.6 0.9l0 0c0 0 0 0 0 0 0.3-0.2 0.5-0.4 0.8-0.7 0 0 9.4-10.8 10.8-20.2C37.3 4 33.5-3.1 27.3 1.3Zm6.6 11.9c-0.8 5.6-4.9 13.3-7.5 17.6l-4.2-0.8A73.9 73.9 0 0 1 21.5 23.2c-0.4-4.9 1.3-16.1 6.8-20 1.1-0.8 2.1-1.1 2.8-0.9 0.7 0.2 1.3 0.7 1.9 1.7 1.1 2.1 1.5 5.5 0.9 9.2z" fill="#EAEAEA"/>
</g>
<animateTransform attributeName="transform" type="translate" dur="20s" values="900,0;800,140;800,150;700,100; 610,160;610,150;610,150;610,160;610,150;600,160;610,330;610,300;610,330;685,470;685,470;560,520;570,530;570,530;480,340;480,330;480,340;400,400;400,400;330,220;330,220;280,180;250,80;225,365;
225,365;225,365;200,180;150,150;150,150;0,0;-100,-100"
fill="freeze"
repeatCount="indefinite" />
</g>
</svg>
#2。蜜蜂翅膀动画
为了使机翼正确旋转（无水平位移），需要选择正确的旋转中心
注意蜜蜂和它的翅膀的形象。
旋转中心的正确选择将是蜜蜂翅膀周围矩形的左角
在这种情况下，CSS 规则为：
transform-origin: bottom left;
transform-box: fill-box;
下面是蜜蜂翅膀的动画：
#wing1 {
transform-origin: bottom left;
transform-box: fill-box;
opacity:0.6;
animation: rotateBox1 .2s infinite;
}
@keyframes rotateBox1 {
0%{ transform:rotate(0deg); }
50%{ transform:rotate(-60deg); }
0%{ transform:rotate(0deg); }
}
#wing2 {
transform-origin: bottom left;
transform-box: fill-box;
opacity:0.75;
animation: rotateBox2 .2s infinite;
}
@keyframes rotateBox2 {
0%{ transform:rotate(0deg); }
50%{ transform:rotate(30deg); }
0%{ transform:rotate(0deg); }
}
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="img-responsive" width="1200" height="700" viewBox="0 0 1200 700" version="1.1" >
<rect width="100%" height="100%" fill="#39D594" />
<g id="bee" transform="scale(4) translate(100,50)">
<g transform="matrix(0.26458,0,0,0.26458,-10.137,-3.944)">
<path d="m108.9 137.3c0-0.3 1.5-2.6 5.2-3.1 15.7-2.2 29.9 28.8 28.9 30.3-1 1.5-8.5 8.6-12.1 9.5-3.6 0.8-7.2 3.2-8.8 3.2-1.7-0.1-7.1 0.5-7.3-0.7-0.1-1.2-2.7-15.4-2.7-20 0-4.6-0.2-13.2-0.9-14.6-0.7-1.4-2.3-4.5-2.3-4.5z" fill="#fff"/>
<path d="m115.6 138.6c-3.2-3.6-9.8-6.9-18.8-4.6-9 2.3-24.6 13.4-24 31.9 0.5 18.6 10.7 29.8 13.7 32.2 1.8 1.5 3.6-1.1 6.2-4 0 0 0 0 0 0 0.7-0.7 3.9-4.8 5.7-6.7 3.9-4.2 8.9-15.8 8.9-15.8 0 0 0.1 7-5 16.4 7.5-4.8 19.8-15.8 21.2-24.8 2.2-13.6-4.8-21.1-7.9-24.6z"/>
<path d="m143 137.4c0 0 15.9-0.8 19.4 0 3.4 0.8 17.5 2.8 26.8 17.8 7 11.2 5.3 29.7 3.2 35.2-2 5.4-12.6 20.3-12.6 20.3l-18.8-11.8c-1.2-0.4-9.4-6.4-10.5-8.1-1.1-1.7-2.1-1.3-3.8-4.6-1.8-3.3-2.6-4.5-3.7-6.6-3.6-6.8-6-3.2-7.1-3.2h-4.6c0 0 7.2-22.7 5.9-28.5-1.3-5.8-4.3-12.9-4.3-12.9z" fill="#fc0"/>
<path d="m85.6 158c0 0-9.3-1-19.1 4.8-13 7.6-19.1 14.4-18.9 17.5 0.2 3.2 3.5 4.1 6.1 0.7 2.6-3.5 1.7-5.8 1.7-5.8 0 0 10.4-11.2 19.3-13.4 8.3-2.1 12.9-1.2 12.9-1.2l3.5-2.4z"/>
<path d="m91.3 149.8c-4.1 1-7.6 5-8.2 14.7-0.7 11.2-0.4 15.1 5.5 11.7 7.1-4.1 11.1-12.8 10.4-20.2-0.5-5-3.2-7.3-7.6-6.3z" fill="#fff"/>
<path d="m82.9 142.2c0 0-7.1-6.1-18.5-6.9-15-1.1-23.9 0.9-25.5 3.6-1.6 2.7 0.5 5.4 4.6 4 4.1-1.4 4.7-3.8 4.7-3.8 0 0 14.9-3.3 23.5 0 8 3 11.3 6.3 11.3 6.3h4.3zm28.3-6.9c0 0 13 0.5 17.1 10.2 9.1 21.4-13.8 31.6-13.8 31.6 0 0 18.6 4.9 26.4-2.4 7.8-7.3 14.4-20.9 5.1-34.4-9.3-13.5-24.1-13.5-34.7-4.9zm32.6 2.1c0 0 8.1-1.2 15.5 4.3 7.3 5.5 9.1 22.7 2.8 31.8-6.9 10-16.3 11-16.3 11l-4.2-7.1c0 0 12.7-6 14.5-16.5 1.8-10.5-2.5-20.7-12.4-23.6zm13.2-0.3c0 0 15.2 2.4 17.7 16.9 2.5 14.5-3.3 25-8.6 28.9-10.1 7.5-18.3 5-18.3 5 0 0 7 7.2 9.5 8.7 0.8 0.5 28.5-6.2 28-33.1-0.2-10.5-4-26.7-28.2-26.5zM187 152.2"/>
<path d="m187 152.2c0 0 9.1 21.1 2.3 33.3-7.1 12.6-15.9 15.5-21.6 15.1-4.6-0.3-4.4-0.5-4.4-0.5 0 0 13.6 14.4 14.4 19.9 0.8 5.5 0 1.7 2.1-2.3 2.1-4 15.9-11.7 17.5-29.4 1.5-17-1.6-24.5-10.3-36.1zm-61.2 25.3c0 0-0.2 4.2-1.1 7.1-0.9 2.8 0 3.8 1.1 8.3 1.1 4.5 1.7 7.8-0.8 9.5-2.5 1.7-2.1 2.7-2.5 1.7-0.4-0.9 0.3-1.4 1.1-3.4 0.8-2 1.5-3.8 0-7-1.5-3.2-4.2-6.1-3.6-10.4 0.3-2.1 0.9-4.9 0.9-4.9l1.5-1.9zm8.9-1.1c0.7 1.3 3.4 5.3 3.8 8.1 0.4 2.8-1.5 4.5-1.9 5.9-0.4 1.3-2.2 4.7 0 7.8 2.2 3 3.2 6.2 3.2 9.8 0 3.6 0.9 5.5 1.9 3.4 0.9-2.1 2.3-1.5 0-7-2.3-5.5-2.3-5.3-2.9-7.7-0.5-2.3 4.1-6.2 4.1-9.3 0.1-3.1-2.6-9.1-3.1-11-0.6-1.9-2.3-4.7-2.3-4.7zm14.8 12.7c0.6 0.6 5.5 9.1 4 16.5-1.5 7.4-4.4 12.9-1.8 16.3 2.6 3.4 6.2 7.4 6.9 7.6 0.8 0.2 1.9-1.1 1.3-2.1-0.6-0.9-2.8-2.6-4-5-1.3-2.6-2.8-5.2-1.1-8.2 1.7-3 3-7 3-9.7 0-2.6-0.1-4.3-0.3-7.7-0.2-3.4-2.7-7.6-2.7-7.6h-5.3zm-47.9-23.3c-1.7 4.8-6 7.7-9.6 6.4-3.6-1.3-5.2-6.2-3.6-11 1.7-4.8 6-7.7 9.6-6.4 3.6 1.3 5.2 6.2 3.6 11z"/>
<circle r="3.3" cy="161.2" cx="90.5" fill="#fff"/>
</g>
<g id="wing1">
<path d="M35.4 10.7C28 16.7 24.1 31.2 24.1 31.7a106.4 106.4 0 0 1 1.1 0.6c1.1 0.6 2.5 2.4 2.5 2.4l1-0.3 0 0c2-0.6 5-1.7 8.2-3.2C41.9 28.8 51.6 21.1 51.6 12.7 51.6 4.8 42.9 4.8 35.4 10.7Zm0.4 18.4c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" fill="#000"/>
<path id="inside-wing1" fill="#EAEAEA" d="m35.9 29.1c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" />
</g>
<g id="wing2">
<path id="wing2" d="m27.3 1.3c-6.5 4.6-8.3 16.8-7.9 22.3 0.3 4.1 1 7.7 1.3 9.5 0.5-0.1 1 0 1.6 0.1 0.1 0.1 0.3 0.1 0.4 0.1 1.4 0.2 1.6 0.8 1.6 0.9l0 0c0 0 0 0 0 0 0.3-0.2 0.5-0.4 0.8-0.7 0 0 9.4-10.8 10.8-20.2C37.3 4 33.5-3.1 27.3 1.3Zm6.6 11.9c-0.8 5.6-4.9 13.3-7.5 17.6l-4.2-0.8A73.9 73.9 0 0 1 21.5 23.2c-0.4-4.9 1.3-16.1 6.8-20 1.1-0.8 2.1-1.1 2.8-0.9 0.7 0.2 1.3 0.7 1.9 1.7 1.1 2.1 1.5 5.5 0.9 9.2z" fill="#000"/>
</g>
</g>
</svg>
3。组合翅膀移动和旋转动画
--
为了真实，添加一张盛开的草地图片
<image xlink:href="https://i.stack.imgur.com/DUxlZ.jpg" x="-100" width="1200" height="700" />
要实现蜜蜂停在花上时的暂停，相应的坐标对
<animateTransform values =" ... 610,150; 610,150; 610,150; ... " 重复
下面是完整的应用代码：
点击后开始动画
#wing1 {
transform-origin: bottom left;
transform-box: fill-box;
opacity:0.6;
animation: rotateBox1 .15s infinite;
}
@keyframes rotateBox1 {
0%{ transform:rotate(0deg); }
50%{ transform:rotate(-60deg); }
0%{ transform:rotate(0deg); }
}
#wing2 {
transform-origin: bottom left;
transform-box: fill-box;
opacity:0.75;
animation: rotateBox2 .15s infinite;
}
@keyframes rotateBox2 {
0%{ transform:rotate(0deg); }
50%{ transform:rotate(30deg); }
0%{ transform:rotate(0deg); }
}
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="img-responsive" width="1200" height="700" viewBox="0 0 1200 700" version="1.1" >
<image xlink:href="https://i.stack.imgur.com/DUxlZ.jpg" x="-100" width="1200" height="700" />
<g id="bee" transform="translate(1400,100)">
<g transform="matrix(0.26458,0,0,0.26458,-10.137,-3.944)">
<path d="m108.9 137.3c0-0.3 1.5-2.6 5.2-3.1 15.7-2.2 29.9 28.8 28.9 30.3-1 1.5-8.5 8.6-12.1 9.5-3.6 0.8-7.2 3.2-8.8 3.2-1.7-0.1-7.1 0.5-7.3-0.7-0.1-1.2-2.7-15.4-2.7-20 0-4.6-0.2-13.2-0.9-14.6-0.7-1.4-2.3-4.5-2.3-4.5z" fill="#fff"/>
<path d="m115.6 138.6c-3.2-3.6-9.8-6.9-18.8-4.6-9 2.3-24.6 13.4-24 31.9 0.5 18.6 10.7 29.8 13.7 32.2 1.8 1.5 3.6-1.1 6.2-4 0 0 0 0 0 0 0.7-0.7 3.9-4.8 5.7-6.7 3.9-4.2 8.9-15.8 8.9-15.8 0 0 0.1 7-5 16.4 7.5-4.8 19.8-15.8 21.2-24.8 2.2-13.6-4.8-21.1-7.9-24.6z"/>
<path d="m143 137.4c0 0 15.9-0.8 19.4 0 3.4 0.8 17.5 2.8 26.8 17.8 7 11.2 5.3 29.7 3.2 35.2-2 5.4-12.6 20.3-12.6 20.3l-18.8-11.8c-1.2-0.4-9.4-6.4-10.5-8.1-1.1-1.7-2.1-1.3-3.8-4.6-1.8-3.3-2.6-4.5-3.7-6.6-3.6-6.8-6-3.2-7.1-3.2h-4.6c0 0 7.2-22.7 5.9-28.5-1.3-5.8-4.3-12.9-4.3-12.9z" fill="#fc0"/>
<path d="m85.6 158c0 0-9.3-1-19.1 4.8-13 7.6-19.1 14.4-18.9 17.5 0.2 3.2 3.5 4.1 6.1 0.7 2.6-3.5 1.7-5.8 1.7-5.8 0 0 10.4-11.2 19.3-13.4 8.3-2.1 12.9-1.2 12.9-1.2l3.5-2.4z"/>
<path d="m91.3 149.8c-4.1 1-7.6 5-8.2 14.7-0.7 11.2-0.4 15.1 5.5 11.7 7.1-4.1 11.1-12.8 10.4-20.2-0.5-5-3.2-7.3-7.6-6.3z" fill="#fff"/>
<path d="m82.9 142.2c0 0-7.1-6.1-18.5-6.9-15-1.1-23.9 0.9-25.5 3.6-1.6 2.7 0.5 5.4 4.6 4 4.1-1.4 4.7-3.8 4.7-3.8 0 0 14.9-3.3 23.5 0 8 3 11.3 6.3 11.3 6.3h4.3zm28.3-6.9c0 0 13 0.5 17.1 10.2 9.1 21.4-13.8 31.6-13.8 31.6 0 0 18.6 4.9 26.4-2.4 7.8-7.3 14.4-20.9 5.1-34.4-9.3-13.5-24.1-13.5-34.7-4.9zm32.6 2.1c0 0 8.1-1.2 15.5 4.3 7.3 5.5 9.1 22.7 2.8 31.8-6.9 10-16.3 11-16.3 11l-4.2-7.1c0 0 12.7-6 14.5-16.5 1.8-10.5-2.5-20.7-12.4-23.6zm13.2-0.3c0 0 15.2 2.4 17.7 16.9 2.5 14.5-3.3 25-8.6 28.9-10.1 7.5-18.3 5-18.3 5 0 0 7 7.2 9.5 8.7 0.8 0.5 28.5-6.2 28-33.1-0.2-10.5-4-26.7-28.2-26.5zM187 152.2"/>
<path d="m187 152.2c0 0 9.1 21.1 2.3 33.3-7.1 12.6-15.9 15.5-21.6 15.1-4.6-0.3-4.4-0.5-4.4-0.5 0 0 13.6 14.4 14.4 19.9 0.8 5.5 0 1.7 2.1-2.3 2.1-4 15.9-11.7 17.5-29.4 1.5-17-1.6-24.5-10.3-36.1zm-61.2 25.3c0 0-0.2 4.2-1.1 7.1-0.9 2.8 0 3.8 1.1 8.3 1.1 4.5 1.7 7.8-0.8 9.5-2.5 1.7-2.1 2.7-2.5 1.7-0.4-0.9 0.3-1.4 1.1-3.4 0.8-2 1.5-3.8 0-7-1.5-3.2-4.2-6.1-3.6-10.4 0.3-2.1 0.9-4.9 0.9-4.9l1.5-1.9zm8.9-1.1c0.7 1.3 3.4 5.3 3.8 8.1 0.4 2.8-1.5 4.5-1.9 5.9-0.4 1.3-2.2 4.7 0 7.8 2.2 3 3.2 6.2 3.2 9.8 0 3.6 0.9 5.5 1.9 3.4 0.9-2.1 2.3-1.5 0-7-2.3-5.5-2.3-5.3-2.9-7.7-0.5-2.3 4.1-6.2 4.1-9.3 0.1-3.1-2.6-9.1-3.1-11-0.6-1.9-2.3-4.7-2.3-4.7zm14.8 12.7c0.6 0.6 5.5 9.1 4 16.5-1.5 7.4-4.4 12.9-1.8 16.3 2.6 3.4 6.2 7.4 6.9 7.6 0.8 0.2 1.9-1.1 1.3-2.1-0.6-0.9-2.8-2.6-4-5-1.3-2.6-2.8-5.2-1.1-8.2 1.7-3 3-7 3-9.7 0-2.6-0.1-4.3-0.3-7.7-0.2-3.4-2.7-7.6-2.7-7.6h-5.3zm-47.9-23.3c-1.7 4.8-6 7.7-9.6 6.4-3.6-1.3-5.2-6.2-3.6-11 1.7-4.8 6-7.7 9.6-6.4 3.6 1.3 5.2 6.2 3.6 11z"/>
<circle r="3.3" cy="161.2" cx="90.5" fill="#fff"/>
</g>
<g id="wing1">
<path d="M35.4 10.7C28 16.7 24.1 31.2 24.1 31.7a106.4 106.4 0 0 1 1.1 0.6c1.1 0.6 2.5 2.4 2.5 2.4l1-0.3 0 0c2-0.6 5-1.7 8.2-3.2C41.9 28.8 51.6 21.1 51.6 12.7 51.6 4.8 42.9 4.8 35.4 10.7Zm0.4 18.4c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" fill="#000"/>
<path id="inside-wing1" fill="#EAEAEA" d="m35.9 29.1c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" />
</g>
<g id="wing2">
<path id="wing2" d="m27.3 1.3c-6.5 4.6-8.3 16.8-7.9 22.3 0.3 4.1 1 7.7 1.3 9.5 0.5-0.1 1 0 1.6 0.1 0.1 0.1 0.3 0.1 0.4 0.1 1.4 0.2 1.6 0.8 1.6 0.9l0 0c0 0 0 0 0 0 0.3-0.2 0.5-0.4 0.8-0.7 0 0 9.4-10.8 10.8-20.2C37.3 4 33.5-3.1 27.3 1.3Zm6.6 11.9c-0.8 5.6-4.9 13.3-7.5 17.6l-4.2-0.8A73.9 73.9 0 0 1 21.5 23.2c-0.4-4.9 1.3-16.1 6.8-20 1.1-0.8 2.1-1.1 2.8-0.9 0.7 0.2 1.3 0.7 1.9 1.7 1.1 2.1 1.5 5.5 0.9 9.2z" fill="#000"/>
</g>
<!-- Bee moving animation -->
<animateTransform attributeName="transform" type="translate" begin="svg1.click" dur="30s" values="900,0;800,140;800,150;700,100; 610,160;610,150;610,150;610,160;610,150;600,160;610,330;610,300;610,330;685,470;685,470;560,520;570,530;570,530;480,340;480,330;480,340;400,400;400,400;330,220;330,220;280,180;250,80;225,365;
225,365;225,365;200,180;150,150;150,150;0,0;-100,-100"
fill="freeze"
repeatCount="indefinite" />
</g>
<text x="200" y="30" font-size="24px" fill="white">Click me </text>
</svg>