使用Raphael绘制svg图像
目录
-
1.Raphael简介
-
2.基础语法
-
3.事件处理
-
4.实战
1.Raphael简介
官方简介
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
Raphaël ['ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics.
This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later.
Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.
Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.
简单的翻译一下:
Raphael是一个很小的Javascript库,你可以用它在web上绘制矢量图形。如果你想创建你自己独有的图表,裁剪和翻转小插件,你可以很容易简单的用它来实现。
Raphael(Raphaël ['ræfeɪəl] )使用SVG的W3C规范和VML作为基准来绘制图形。
这就意味着你创建的所有图形都将作为一个DOM对象，你可以添加JavaScript事件和在今后修改它们。
Raphael的目标是提供一个适配器来绘制简单的，兼容跨浏览器的矢量图。
Raphael支持Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ 和 Internet Explorer 6.0+.
之前用过d3绘制图表，然而时过境迁，d3已经不再支持IE8了（以后我会再将d3总结一篇文档）。所以Raphael将是一个很完美的图表解决方案，
当然，你可以选择HighChart ，授权收费，而且还不低，
或者 选择Echart2 ，不再维护，例如当一个页面中同时存在echarts图表和svg图形时 从echart图表mouseleave, mouseover到svg Elements上时，报错：Uncaught TypeError: target.className.match is not a function ，在这个issues 中我给了一个简单的方案。然而还有更多诸如这样的坑。
事实上，定制化的图表你依然无法实现。而 Echarts2 正是基于 Raphael 绘制，所以不如我们试试 Raphael 吧。
2.基础语法
首先，你需要实例化画板：
var paper = new Raphael('cirlce', 400, 400);
//var paper = new Raphael('div或者其他元素的id', 自定义宽度, 自定义高度);
如果未定义画板的高度或者宽度，可能会报这个错误，所以只要是这种类似的错误，大可因为宽高未获取到：
raphael.js:7142 Uncaught TypeError: Cannot read property 'x' of undefined(…)
Raphael 提供了多个元素画法：
1.绘制圆形
var cirlce = paper.ellipse(100, 100, 50, 20);
2.绘制方形
var rect = paper.rect(100, 100, 50, 20);
3.加载图片
var img = paper.image("mydog.png", 25, 20, 110, 100);
4.文字
var txt = paper.text(200, 40, "使用Raphael绘制svg图像");
5.绘制path路径
var path1 = paper.path('M 10,30 L 60,30 L 10,80 L 60,80');
这样，我们就可以随心所欲的利用 path 绘制map和各种可爱的小动物。
6.为文字填充颜色，设置字体，字号等等
var txt = paper.text(200, 40, "使用Raphael绘制svg图像");
txt.attr("font-size", 16);
当然，支持链式方法
var txt = paper.text(200, 40, "使用Raphael绘制svg图像")
.attr("font-size", 16)
对象也行
var txt = paper.text(200, 40, "使用Raphael绘制svg图像")
.attr("font-size", 16)
.attr({
"font-size": 13, //in pixels
"font-family": "宋体"
});
参考以上，你当然也可以为你的图形填充颜色，翻转等一些 svg 自带的属性。
绘制方形并填充红色：
var rect2= paper.rect(40, 40, 120, 60).attr("fill", "red");
和 svg 一样，可以填充渐变颜色：
var rect = paper.rect(100, 100, 50, 20);
rect.attr('fill', '0-#00a9e0-#323490:20-#ea1688:40-#eb2e2e:60-#fde92d:80-#009e54');
旋一下：
rect2.attr('transform', 'R45'); //度数旋转 45度
rect2.attr('transform', 'T50,60');//x,y坐标方法旋转
rect2.attr('transform', 'S0.8,0.5')
一款取色器效果图：
var paper = Raphael(0, 0, 500, 500);
var colors = paper.set();
for (var c = 0; c < 16; c += 1) {
for (var i = 0; i < 3; i += 1) {
colors.push(
paper.rect(10 + c * 20, 10 + i * 20, 20, 20)
.attr({
fill: Raphael.hsl(c / 16, 1, (i+1)/4),
stroke: "#CCC"
})
);
}
}
尝试为它们加上事件试试吧
ps:高级用法：
我们可以为所绘制的图形更改坐标系：
paper.setViewBox(0, 0, 600, 80); // 放大坐标系(等于缩小了图形)
3.事件处理
Raphael 为绘制的图形提供了 JavaScript 事件处理：
点击变色：
var paper = Raphael(10, 20, 200, 200);
var rect1 = paper.rect(25, 25, 250, 250).attr('fill', 'green');
mysquare.click(function(e) {
this.attr('fill', 'skyblue');
});
鼠标移入方形颜色变淡，移出变深:
var rect1 = paper.rect(25, 25, 250, 250)
.attr({'cursor': 'pointer','fill': 'green' });
rect1.mouseover(function(e) {
this.attr('fill-opacity', 0.4);
}).mouseout(function(e) {
this.attr('fill-opacity', 1);
});
这个过程和绘制其实图形是一样的方法，你可以更新更多属性。
一般有这些事件：
1.click 单击事件；
2.dbclick 双击事件；
3.drag事件，元素拖动事件;
3.hide 隐藏事件；
4.hover 悬浮事件；
5.mousedown 鼠标按下
6.mouseout 鼠标移出事件
7.mouseover mouseup 送掉事件；
能绑定事件，就可以解除绑定的事件：
前面加un
动画效果
var paper = Raphael(0, 0, 500, 500);
var square = paper.rect(50, 50, 100, 25).attr({ 'fill': 'green' });
var anim = Raphael.animation({x: 100, y: 200, height: 125}, 750).delay(1000);
//var anim = Raphael.animation({cx: 200, cy: 300, fill: "blue" }, 1000, "backOut");
//dot.animate(anim);
// var anim = Raphael.animation({cx: 200, cy: 300, fill: "blue" }, 1000, "backOut" ,function(){
// console.log('使用Raphael绘制svg图像');
// });
4.实战
在维基百科上找到一张蝴蝶的svg，
我们参考path画一张蝴蝶,并添加点击事件（你可以添加一下animal动画让蝴蝶动起来，233333）：
<html>
<head>
<title>butterfly</title>
</head>
<body>
<div id="butterfly" class="cirlce" style="width:200px;height:200px;"></div>
<div id="cmd"></div>
<script src="js/lib/jquery-1.11.0.min.js"></script>
<script src="js/lib/raphael.js"></script>
<!--蝴蝶-->
<script src="js/butterfly.js"></script>
</body>
// butterfly-raphael
// by flyher
// 2016-12-08 20:00
var paper = new Raphael('butterfly', 200, 200);
function drawPath(obj) {
var part = paper.path(obj.path);
part.attr(obj.type === undefined ? '{}' : obj.type);
part.attr('color', obj.color);
part.mouseover(function () {
this.attr('fill', 'silver');
this.attr('fill-opacity', 0.6);
this.attr({ 'cursor': 'pointer' })
}).click(function () {
$('#cmd').text(JSON.stringify(obj));
}, butterflyPaths).mouseout(function () {
this.attr('fill', 'white');
this.attr('fill-opacity', 1);
});
}
// 抠出来的蝴蝶path路径
var butterflyPaths = [
{
id: 1,
part: 'left',
color: '#4ca5e6',
path: 'm 38.903,28.286 c 3.791,9.962 2.064,20.88 -1.544,29.274 -1.029,2.396 -2.452,4.96 -4.293,6.742 -0.524,0.509 -1.617,1.761 -2.385,1.951 -1.475,0.362 -3.188,-1.813 -3.957,-2.69 -1.661,-1.896 -2.906,-4.046 -4.005,-6.295 -1.596,-3.262 -4.067,-7.75 -3.254,-11.657 0.6,-2.879 0.964,-5.561 0.029,-8.6 -1.059,-3.442 -4.486,-5.835 -5.099,-9.562 -0.906,-5.503 -1.92,-11.78 -1.547,-18.092 0.893,-15.075 23.935,13.359 26.055,18.929 z'
},
{
id: 2,
part: 'left',
color: '#333333',
path: 'm 39.022,28.241 c 0.96,2.834 1.598,5.773 1.866,8.745 0.274,2.973 0.182,5.971 -0.167,8.939 -0.362,2.968 -0.993,5.908 -1.865,8.789 -0.898,2.864 -1.925,5.734 -3.636,8.366 -0.43,0.654 -0.911,1.287 -1.453,1.888 -0.455,0.52 -0.947,1.151 -1.614,1.735 -0.179,0.148 -0.362,0.298 -0.61,0.443 -0.219,0.143 -0.668,0.3 -0.929,0.325 -0.755,0.092 -1.306,-0.096 -1.789,-0.301 -0.936,-0.437 -1.581,-1.006 -2.188,-1.563 -0.592,-0.561 -1.122,-1.119 -1.638,-1.657 -0.261,-0.281 -0.545,-0.618 -0.809,-0.927 -0.246,-0.313 -0.507,-0.621 -0.741,-0.941 -0.958,-1.273 -1.801,-2.62 -2.567,-3.956 -1.435,-2.568 -3.139,-5.275 -3.929,-8.783 -0.179,-0.882 -0.284,-1.821 -0.259,-2.805 0.013,-0.484 0.071,-1.015 0.148,-1.48 l 0.162,-1.055 c 0.204,-1.367 0.286,-2.627 0.171,-3.792 -0.049,-0.584 -0.147,-1.149 -0.295,-1.706 -0.071,-0.277 -0.159,-0.562 -0.257,-0.825 -0.079,-0.197 -0.17,-0.397 -0.3,-0.646 C 15.837,36.078 15.009,35 14.076,33.703 13.158,32.415 12.122,30.79 11.616,28.736 11.552,28.483 11.503,28.224 11.457,27.964 L 11.368,27.4 11.204,26.287 10.887,24.04 c -0.398,-3.011 -0.684,-6.089 -0.706,-9.208 0.001,-1.56 0.06,-3.127 0.196,-4.694 l 0.117,-1.193 c 0.052,-0.433 0.128,-0.916 0.232,-1.366 0.228,-0.92 0.547,-1.941 1.381,-2.968 0.412,-0.503 0.999,-0.979 1.662,-1.268 0.664,-0.296 1.357,-0.394 1.961,-0.381 1.214,0.042 2.128,0.409 2.94,0.792 1.603,0.799 2.845,1.803 4.035,2.834 2.345,2.083 4.355,4.363 6.271,6.706 1.908,2.346 3.735,4.735 5.432,7.215 0.858,1.231 1.697,2.476 2.485,3.753 0.787,1.277 1.589,2.552 2.129,3.979 z M 38.784,28.33 C 37.468,25.696 35.52,23.384 33.635,21.105 31.686,18.861 29.664,16.683 27.514,14.654 25.36,12.638 23.114,10.706 20.749,9.119 19.575,8.339 18.34,7.633 17.196,7.251 16.637,7.061 16.091,6.983 15.806,7.041 15.507,7.127 15.644,7.144 15.553,7.289 15.471,7.452 15.34,7.902 15.287,8.437 15.254,8.72 15.241,8.978 15.234,9.289 l 0.003,1.041 c 0.019,1.414 0.107,2.833 0.249,4.253 0.258,2.843 0.697,5.696 1.189,8.584 l 0.375,2.175 0.196,1.095 0.093,0.542 c 0.022,0.107 0.041,0.214 0.071,0.323 0.204,0.862 0.78,1.823 1.567,2.966 0.775,1.144 1.805,2.427 2.648,4.151 0.199,0.42 0.4,0.907 0.567,1.415 0.141,0.442 0.255,0.877 0.353,1.327 0.198,0.894 0.315,1.81 0.353,2.715 0.064,1.818 -0.2,3.545 -0.535,5.109 -0.085,0.406 -0.181,0.79 -0.27,1.14 -0.068,0.266 -0.113,0.475 -0.147,0.736 -0.062,0.505 -0.06,1.063 0.006,1.653 0.236,2.409 1.384,5.062 2.567,7.825 0.545,1.343 1.127,2.624 1.808,3.846 0.165,0.31 0.353,0.599 0.528,0.901 0.187,0.285 0.347,0.549 0.555,0.847 0.441,0.607 0.867,1.194 1.293,1.725 0.417,0.519 0.875,0.991 1.268,1.247 0.179,0.128 0.37,0.172 0.362,0.195 0.112,-0.004 0.021,0.029 0.132,-10e-4 0.083,-0.027 0.204,-0.097 0.324,-0.17 0.513,-0.333 1.024,-0.815 1.626,-1.347 0.524,-0.443 1.012,-0.951 1.472,-1.493 1.846,-2.182 3.177,-4.876 4.28,-7.616 0.559,-1.373 1.029,-2.782 1.426,-4.215 0.408,-1.429 0.729,-2.885 0.957,-4.356 0.938,-5.863 0.538,-12.06 -1.766,-17.572 z'
},
{
id: 3,
part: 'left',
color: '#50c0e0',
path: 'm 16.884,10.399 c 1.302,1.109 2.759,1.759 4.294,2.356 0.77,0.296 1.556,0.587 2.354,0.925 0.799,0.321 1.626,0.795 2.365,1.28 1.487,1.028 2.704,2.329 3.799,3.635 1.118,1.285 2.125,2.729 2.958,4.225 l 2.48,4.479 c 0.831,1.48 1.742,2.983 2.45,4.509 0.706,1.543 1.232,3.194 1.543,4.909 0.299,1.707 0.374,3.519 -0.118,5.199 -0.016,0.054 -0.073,0.085 -0.127,0.07 -0.039,-0.012 -0.066,-0.045 -0.072,-0.083 -0.278,-1.689 -0.674,-3.255 -1.188,-4.813 -0.5,-1.558 -1.114,-3.085 -1.596,-4.693 -0.479,-1.626 -0.75,-3.287 -1.471,-4.803 -0.699,-1.517 -1.67,-2.898 -2.791,-4.135 -2.279,-2.397 -4.577,-4.906 -7.1,-6.757 -0.637,-0.489 -1.266,-0.871 -1.986,-1.28 -0.715,-0.403 -1.466,-0.802 -2.205,-1.257 -1.477,-0.882 -2.939,-2.084 -3.743,-3.636 l -0.003,-0.005 c -0.026,-0.05 -0.006,-0.111 0.043,-0.137 0.039,-0.02 0.084,-0.013 0.114,0.012 z'
},
{
id: 4,
part: 'left',
color: '#50c0e0',
path: 'm 16.509,18.245 c 0.164,-1.283 1.196,-2.367 2.407,-2.839 0.611,-0.239 1.272,-0.276 1.897,-0.242 0.628,0.012 1.238,0.189 1.792,0.463 0.557,0.265 1.075,0.497 1.639,0.599 0.557,0.112 1.214,0.028 1.809,0.175 0.591,0.148 1.08,0.528 1.507,0.952 0.41,0.447 0.771,0.961 0.896,1.63 0.012,0.065 -0.031,0.129 -0.097,0.141 -0.014,0.003 -0.032,0.002 -0.045,0 -0.655,-0.115 -1.149,-0.308 -1.646,-0.495 -0.479,-0.21 -0.948,-0.391 -1.349,-0.73 -0.397,-0.34 -0.77,-0.837 -1.268,-1.057 -0.491,-0.229 -1.054,-0.247 -1.593,-0.13 -0.542,0.125 -1.042,0.252 -1.517,0.338 -0.478,0.109 -0.914,0.271 -1.352,0.382 -0.894,0.215 -1.74,0.47 -2.926,0.941 -0.058,0.023 -0.124,-0.006 -0.147,-0.064 -0.007,-0.018 -0.009,-0.038 -0.007,-0.056 l 0,-0.008 z'
},
{
id: 5,
part: 'left',
color: '#50c0e0',
path: 'm 16.773,20.924 c 1.27,-0.114 2.48,-0.196 3.736,-0.223 1.249,-0.021 2.549,0.044 3.857,0.382 1.303,0.344 2.563,1.046 3.566,1.972 0.503,0.457 0.961,0.97 1.327,1.511 0.354,0.502 0.672,1.06 1.002,1.604 0.63,1.094 1.28,2.148 2.047,3.123 0.764,0.975 1.722,1.825 2.508,2.785 0.393,0.479 0.754,0.979 1.067,1.509 0.33,0.519 0.644,1.047 0.943,1.583 0.593,1.08 1.165,2.166 1.619,3.37 0.021,0.054 -0.006,0.114 -0.06,0.135 -0.033,0.013 -0.07,0.006 -0.097,-0.012 C 37.228,37.92 36.361,37 35.553,36.049 35.148,35.573 34.774,35.076 34.415,34.572 34.04,34.077 33.718,33.551 33.427,33.003 32.845,31.91 32.429,30.71 31.777,29.665 31.129,28.619 30.32,27.682 29.418,26.842 l -1.365,-1.24 c -0.435,-0.397 -0.85,-0.763 -1.306,-1.083 -0.906,-0.645 -1.91,-1.043 -2.975,-1.381 -2.112,-0.712 -4.691,-0.919 -7.033,-2.016 -0.052,-0.024 -0.074,-0.086 -0.05,-0.138 0.016,-0.035 0.049,-0.056 0.084,-0.06 z'
},
{
id: 6,
part: 'left',
color: '#50c0e0',
path: 'm 20.111,26.942 c 0.142,-0.572 0.599,-1.054 1.15,-1.305 0.55,-0.267 1.164,-0.334 1.697,-0.256 0.54,0.08 1.002,0.318 1.436,0.527 0.447,0.208 0.763,0.61 1.185,0.823 0.393,0.225 0.855,0.326 1.322,0.256 0.471,-0.073 0.958,-0.301 1.426,-0.316 0.915,0.045 1.892,0.338 2.661,1.207 0.044,0.05 0.039,0.126 -0.011,0.17 -0.01,0.009 -0.021,0.016 -0.034,0.021 l -0.005,0.002 c -1.028,0.422 -1.896,0.518 -2.815,0.34 -0.45,-0.123 -0.882,-0.456 -1.327,-0.655 -0.449,-0.197 -0.9,-0.241 -1.411,-0.219 -0.481,0.012 -1.045,0.125 -1.486,0.077 -0.454,-0.049 -0.887,-0.05 -1.262,-0.109 -0.774,-0.126 -1.254,-0.416 -2.404,-0.404 -0.069,0.001 -0.125,-0.054 -0.126,-0.123 0,-0.011 0.001,-0.021 0.003,-0.031 l 0.001,-0.005 z'
},
{
id: 7,
part: 'left',
color: '#50c0e0',
path: 'm 21.789,31.695 c 1.299,-0.645 2.736,-0.677 4.062,-0.451 0.664,0.128 1.288,0.394 1.894,0.667 0.613,0.256 1.181,0.617 1.718,1.031 0.539,0.406 1.098,0.738 1.719,0.919 0.619,0.185 1.334,0.13 1.974,0.245 0.639,0.117 1.198,0.421 1.756,0.732 0.548,0.34 1.088,0.696 1.589,1.247 0.043,0.047 0.041,0.121 -0.007,0.164 -0.015,0.014 -0.033,0.023 -0.051,0.027 -0.729,0.181 -1.406,0.124 -2.064,0.025 -0.648,-0.127 -1.287,-0.289 -1.841,-0.646 -0.553,-0.36 -1.026,-0.901 -1.599,-1.197 -0.57,-0.3 -1.204,-0.444 -1.866,-0.494 -0.664,-0.042 -1.305,-0.116 -1.913,-0.256 -0.615,-0.123 -1.226,-0.215 -1.811,-0.389 -1.17,-0.378 -2.293,-0.778 -3.564,-1.425 -0.055,-0.028 -0.076,-0.095 -0.048,-0.149 0.011,-0.021 0.032,-0.039 0.052,-0.05 z'
}, {
id: 8,
part: 'left',
color: '#50c0e0',
path: 'm 23.97,36.598 c 1.192,-0.688 2.326,-1.159 3.704,-1.289 0.669,-0.057 1.427,0.076 2.06,0.285 0.697,0.196 1.285,0.538 1.822,0.966 0.535,0.419 1.046,0.797 1.634,1.046 0.58,0.257 1.29,0.324 1.893,0.566 0.602,0.244 1.074,0.667 1.529,1.1 0.439,0.458 0.854,0.932 1.18,1.584 0.029,0.058 0.006,0.128 -0.052,0.157 -0.017,0.009 -0.036,0.013 -0.054,0.013 -0.735,-0.004 -1.357,-0.224 -1.95,-0.466 -0.577,-0.269 -1.132,-0.553 -1.572,-0.996 -0.438,-0.444 -0.785,-1.042 -1.292,-1.397 -0.499,-0.364 -1.105,-0.544 -1.727,-0.593 -0.619,-0.041 -1.228,-0.07 -1.753,-0.122 -0.59,-0.04 -1.084,0.009 -1.662,-0.008 -1.118,-0.063 -2.449,-0.061 -3.75,-0.646 -0.057,-0.025 -0.082,-0.092 -0.057,-0.148 0.011,-0.023 0.028,-0.041 0.047,-0.052 z'
}, {
id: 9,
part: 'left',
color: '#50c0e0',
path: 'm 27.999,61.988 c 1.371,-0.466 2,-1.19 2.788,-2.041 l 1.246,-1.292 c 0.403,-0.472 0.865,-0.93 1.361,-1.389 0.489,-0.464 0.892,-0.994 1.141,-1.604 0.253,-0.609 0.266,-1.34 0.456,-1.987 0.192,-0.646 0.576,-1.202 1.001,-1.741 0.449,-0.518 0.963,-1.037 1.686,-1.322 0.059,-0.023 0.125,0.006 0.149,0.064 0.007,0.02 0.009,0.044 0.006,0.063 -0.104,0.74 -0.284,1.347 -0.49,1.97 -0.229,0.604 -0.458,1.213 -0.873,1.735 -0.417,0.522 -1.004,0.964 -1.365,1.52 -0.366,0.555 -0.591,1.182 -0.767,1.855 -0.169,0.677 -0.407,1.335 -0.769,1.936 -0.345,0.608 -0.737,1.225 -1.296,1.726 -0.558,0.491 -1.257,0.907 -2.045,1.079 -0.781,0.178 -1.646,0.073 -2.255,-0.372 l -0.005,-0.004 c -0.049,-0.036 -0.06,-0.106 -0.024,-0.155 0.015,-0.02 0.034,-0.033 0.055,-0.041 z'
}, {
id: 10,
part: 'left',
color: '#50c0e0',
path: 'm 26.319,58.746 c 1.395,-0.514 2.398,-0.984 3.349,-1.631 0.479,-0.309 0.998,-0.603 1.509,-0.967 0.496,-0.376 1.045,-0.742 1.63,-1.107 0.581,-0.369 1.09,-0.821 1.477,-1.375 0.39,-0.551 0.592,-1.275 0.98,-1.871 0.388,-0.594 0.965,-1.036 1.585,-1.407 0.636,-0.347 1.339,-0.622 2.123,-0.594 0.063,0.002 0.113,0.056 0.11,0.119 0,0.021 -0.008,0.042 -0.019,0.059 -0.411,0.645 -0.827,1.127 -1.234,1.626 -0.425,0.476 -0.818,0.966 -1.356,1.346 -0.538,0.378 -1.217,0.67 -1.698,1.142 -0.484,0.469 -0.837,1.048 -1.148,1.684 -0.307,0.64 -0.68,1.254 -1.18,1.78 -0.483,0.538 -1.037,1.069 -1.726,1.425 -1.379,0.71 -3.14,0.77 -4.418,-0.028 l -0.004,-0.003 c -0.052,-0.032 -0.067,-0.1 -0.035,-0.151 0.013,-0.023 0.033,-0.039 0.055,-0.047 z'
}, {
id: 11,
part: 'left',
color: '#50c0e0',
path: 'm 24.778,54.702 c 1.247,-0.429 2.144,-0.833 3.155,-1.222 0.498,-0.188 1.031,-0.312 1.57,-0.473 0.528,-0.18 1.096,-0.308 1.694,-0.419 0.594,-0.118 1.153,-0.33 1.606,-0.705 0.46,-0.366 0.763,-0.959 1.166,-1.396 0.404,-0.436 0.924,-0.707 1.46,-0.969 0.553,-0.234 1.127,-0.451 1.83,-0.48 0.066,-0.003 0.122,0.048 0.125,0.113 0,0.018 -0.003,0.034 -0.008,0.049 -0.256,0.653 -0.634,1.129 -1.036,1.582 -0.419,0.428 -0.857,0.84 -1.419,1.075 -0.565,0.234 -1.237,0.301 -1.769,0.568 -0.538,0.26 -0.985,0.659 -1.417,1.117 -0.428,0.465 -0.906,0.879 -1.45,1.186 -0.533,0.326 -1.097,0.634 -1.725,0.793 -1.229,0.299 -2.733,0.242 -3.812,-0.623 -0.05,-0.037 -0.061,-0.107 -0.024,-0.158 0.013,-0.016 0.035,-0.031 0.054,-0.038 z'
}, {
id: 12,
part: 'left',
color: '#50c0e0',
path: 'm 23.039,50.548 c 0.561,-0.278 1.157,-0.334 1.679,-0.304 0.531,0.036 1.022,0.146 1.446,0.377 0.418,0.251 0.83,0.457 1.207,0.787 0.206,0.163 0.354,0.37 0.574,0.446 0.164,0.088 0.413,0.13 0.637,0.127 0.968,0.064 1.727,-0.927 2.669,-1.148 0.478,-0.112 0.979,-0.184 1.511,-0.158 0.518,0.019 1.105,0.105 1.601,0.464 0.052,0.037 0.063,0.11 0.026,0.162 -0.009,0.013 -0.021,0.022 -0.033,0.03 l -0.011,0.007 c -0.919,0.563 -1.693,0.984 -2.652,1.24 -0.469,0.126 -0.996,0.077 -1.524,0.013 -0.532,-0.071 -1.034,-0.072 -1.543,0.005 -0.495,0.089 -1.14,0.104 -1.671,0.184 -0.558,0.048 -1.062,-0.09 -1.554,-0.193 -0.488,-0.122 -0.901,-0.38 -1.289,-0.679 -0.396,-0.304 -0.73,-0.662 -1.121,-1.166 -0.043,-0.055 -0.033,-0.135 0.022,-0.178 0.007,-0.005 0.014,-0.01 0.021,-0.013 l 0.005,-0.003 z'
}, {
id: 13,
part: 'left',
color: '#50c0e0',
path: 'm 23.14,47.608 c 0.989,-0.801 2.24,-0.993 3.353,-0.942 0.564,0.036 1.099,0.2 1.621,0.364 0.526,0.143 1.025,0.379 1.519,0.654 0.494,0.267 1.01,0.447 1.543,0.423 0.534,-0.012 1.067,-0.311 1.556,-0.455 0.491,-0.142 0.97,-0.109 1.471,-0.105 0.507,0.034 1.019,0.054 1.654,0.209 0.066,0.015 0.107,0.08 0.092,0.146 -0.003,0.014 -0.009,0.028 -0.016,0.039 -0.359,0.562 -0.881,0.892 -1.427,1.134 -0.552,0.214 -1.146,0.356 -1.728,0.244 -0.585,-0.113 -1.126,-0.46 -1.662,-0.569 -0.537,-0.12 -1.086,-0.086 -1.653,0.016 -0.568,0.11 -1.127,0.162 -1.66,0.129 -0.538,-0.012 -1.064,-0.015 -1.567,-0.108 -1.016,-0.207 -1.932,-0.501 -3.071,-0.98 -0.059,-0.025 -0.086,-0.092 -0.062,-0.151 0.008,-0.019 0.022,-0.036 0.037,-0.048 z'
}, {
id: 14,
part: 'left',
color: '#50c0e0',
path: 'm 23.423,43.371 c 0.421,-0.628 1.179,-1.026 1.952,-1.167 0.781,-0.149 1.565,-0.06 2.266,0.129 0.703,0.198 1.313,0.552 1.889,0.891 0.58,0.321 1.112,0.715 1.638,1.143 0.531,0.421 1.11,0.75 1.75,0.902 0.639,0.157 1.355,0.043 2.003,0.085 0.649,0.045 1.244,0.264 1.853,0.48 0.604,0.247 1.209,0.498 1.826,0.943 0.052,0.037 0.064,0.109 0.028,0.161 -0.012,0.017 -0.029,0.03 -0.046,0.039 -0.697,0.318 -1.399,0.383 -2.092,0.389 -0.688,-0.024 -1.381,-0.099 -2.005,-0.402 -0.625,-0.305 -1.169,-0.811 -1.778,-1.085 -0.608,-0.278 -1.263,-0.418 -1.953,-0.498 -0.695,-0.073 -1.372,-0.209 -1.995,-0.431 -0.627,-0.2 -1.23,-0.372 -1.782,-0.586 -1.124,-0.436 -2.016,-0.852 -3.461,-0.815 -0.062,10e-4 -0.112,-0.047 -0.114,-0.108 0,-0.024 0.006,-0.046 0.019,-0.065 l 0.002,-0.005 z'
}, {
id: 15,
part: 'left',
color: '#333333',
path: 'm 41.033,40.253 c -0.84,-0.349 -1.728,-0.21 -2.535,0.078 -0.815,0.276 -1.643,0.689 -2.61,0.83 -0.98,0.152 -1.953,0.034 -2.847,-0.107 -0.918,-0.153 -1.688,-0.263 -2.569,-0.295 -1.64,-0.062 -3.354,0.148 -5.103,0.379 -1.756,0.228 -3.598,0.48 -5.578,0.443 l -0.036,0 c -1.11,-0.021 -1.994,-0.938 -1.973,-2.048 0.021,-1.11 0.938,-1.994 2.048,-1.973 0.127,0.002 0.262,0.019 0.383,0.044 1.551,0.332 3.265,0.435 5.048,0.536 1.789,0.104 3.638,0.211 5.516,0.642 1.871,0.38 3.447,1.335 5.032,1.382 0.813,0.044 1.667,-0.188 2.572,-0.319 0.893,-0.147 1.901,-0.097 2.652,0.408 z'
},
{
id: 16,
part: 'right',
color: '#4ca5e6',
path: 'M 57.18,28.155999 C 47.876,33.681 41.778,43.705 38.556,53.816 c -0.988,3.103 -1.792,6.771 -1.589,10.051 0.059,0.954 0.021,3.194 0.58,4.011 1.09,1.59 4.554,0.461 6.013,0.073 3.134,-0.832 6.035,-2.268 8.824,-3.897 3.966,-2.317 9.545,-5.219 11.35,-9.734 1.276,-3.193 2.61,-5.946 5.349,-8.125 3.025,-2.407 7.652,-2.412 10.26,-5.262 3.698,-4.042 7.696,-8.441 10.229,-13.345001 5.482,-10.618 -27.452,-2.362 -32.392,0.568 z'
},
{
id: 17,
part: 'right',
color: '#333333',
path: 'M 57.245,28.263999 C 51.632,31.383 47.208,36.356 44.008,41.867 c -1.603,2.769 -2.911,5.702 -3.93,8.721 -1.036,3.012 -1.8,6.128 -2.079,9.229 -0.064,0.774 -0.103,1.547 -0.082,2.312 0.013,0.784 0.108,1.466 0.194,2.326 0.077,0.787 0.161,1.563 0.332,2.188 0.041,0.156 0.092,0.289 0.138,0.387 0.022,0.045 0.046,0.081 0.059,0.092 0.005,-0.001 0.008,0 0.009,0.001 -0.089,-0.122 -0.01,-0.018 -0.024,-0.037 l 0.025,0.028 0.049,0.057 c -0.006,-0.056 0.109,0.035 0.307,0.046 0.412,0.058 1.095,-0.027 1.764,-0.199 0.686,-0.17 1.375,-0.41 2.148,-0.678 1.482,-0.493 2.793,-1.081 4.15,-1.797 1.342,-0.696 2.653,-1.486 3.949,-2.336 1.352,-0.885 2.696,-1.744 3.947,-2.612 2.493,-1.706 4.79,-3.633 5.794,-5.679 0.07,-0.125 0.116,-0.252 0.179,-0.376 l 0.17,-0.431 0.459,-1.171 c 0.323,-0.792 0.678,-1.601 1.093,-2.414 0.831,-1.617 1.953,-3.25 3.364,-4.622 0.72,-0.694 1.396,-1.276 2.414,-1.889 0.898,-0.531 1.792,-0.924 2.629,-1.243 1.676,-0.636 3.175,-1.054 4.328,-1.588 0.572,-0.269 1.061,-0.528 1.442,-0.822 0.1,-0.072 0.187,-0.149 0.274,-0.225 l 0.126,-0.117 0.204,-0.209 0.832,-0.861 c 1.104,-1.14 2.181,-2.286 3.231,-3.433 2.13,-2.268 4.072,-4.635001 5.706,-7.145001 0.986,-1.451 1.052,-2.076 0.989,-2.164 -0.063,-0.175 -0.516,-0.512 -1.104,-0.72 -0.587,-0.223 -1.287,-0.379 -2.008,-0.49 -2.934,-0.417 -6.144,-0.258 -9.282,0.024 -3.156,0.304 -6.305,0.841 -9.432,1.482 -1.559,0.341 -3.107,0.729 -4.644,1.163 -1.524,0.448 -3.074,0.892 -4.483,1.599 z m -0.131,-0.217 c 1.402,-0.84 2.92,-1.396 4.426,-1.967 1.513,-0.556 3.045,-1.052 4.584,-1.527 3.072,-0.981 6.195,-1.805 9.368,-2.51 C 78.676,21.36 81.882,20.76 85.351,20.804 c 0.874,0.025 1.769,0.096 2.722,0.318 0.934,0.239 2.022,0.57 3.018,1.620999 0.483,0.52 0.863,1.251 1,1.977 0.145,0.726 0.096,1.402 -0.016,1.985 -0.122,0.595 -0.28,1.076 -0.505,1.598 -0.185,0.431 -0.364,0.788 -0.548,1.186 C 89.528,32.579 87.558,35.33 85.552,37.949 c -1.023,1.295 -2.086,2.537 -3.138,3.767 l -0.788,0.915 -0.202,0.233 -0.291,0.315 c -0.199,0.202 -0.403,0.401 -0.615,0.583 -0.846,0.738 -1.754,1.292 -2.63,1.705 -1.751,0.831 -3.35,1.287 -4.654,1.824 -0.656,0.262 -1.225,0.538 -1.701,0.832 -0.355,0.215 -0.914,0.669 -1.352,1.081 -0.902,0.852 -1.639,1.879 -2.303,3.092 -0.337,0.603 -0.652,1.251 -0.96,1.931 l -0.458,1.051 -0.301,0.675 c -0.12,0.232 -0.232,0.475 -0.364,0.696 -1.038,1.813 -2.415,3.197 -3.811,4.35 -1.412,1.148 -2.887,2.061 -4.344,2.896 -1.47,0.825 -2.921,1.532 -4.337,2.263 -1.477,0.756 -2.998,1.474 -4.582,2.085 -1.567,0.595 -3.277,1.104 -4.896,1.421 -0.77,0.161 -1.628,0.348 -2.521,0.451 -0.903,0.09 -1.854,0.175 -3.009,-0.147 -0.577,-0.178 -1.207,-0.479 -1.728,-1.153 L 36.435,68.624 36.294,68.365 C 36.213,68.199 36.16,68.05 36.115,67.906 36.031,67.625 35.981,67.369 35.949,67.131 35.824,66.18 35.855,65.347 35.873,64.535 c 0.02,-0.739 0.015,-1.66 0.108,-2.478 0.083,-0.837 0.199,-1.661 0.358,-2.473 0.621,-3.254 1.811,-6.288 3.057,-9.256 1.275,-2.964 2.768,-5.822 4.463,-8.549 3.4,-5.437 7.811,-10.282 13.255,-13.732001 z'
},
{
id: 18,
part: 'right',
color: '#50c0e0',
path: 'm 85.505,26.495999 c -1.578,0.769 -3.448,0.899 -5.165,0.819 -0.867,-0.031 -1.716,-0.111 -2.541,-0.172 -0.836,-0.058 -1.583,-0.094 -2.396,-0.057 -3.172,0.082 -6.517,0.729 -9.794,1.314 -1.644,0.333 -3.259,0.854 -4.734,1.655 C 59.383,30.827 58.145,32.008 56.761,32.99 c -1.37,0.98 -2.795,1.821 -4.152,2.752 -1.375,0.917 -2.652,1.923 -3.948,3.057 -0.042,0.038 -0.106,0.035 -0.145,-0.007 -0.027,-0.03 -0.032,-0.074 -0.018,-0.109 0.692,-1.609 1.859,-2.994 3.15,-4.157 1.3,-1.168 2.729,-2.161 4.241,-2.954 1.512,-0.767 3.132,-1.416001 4.7,-2.099001 l 4.686,-2.115 c 1.568,-0.709 3.231,-1.276 4.903,-1.658 1.659,-0.411 3.405,-0.75 5.205,-0.747 0.88,0.025 1.826,0.094 2.667,0.268 0.854,0.159 1.676,0.35 2.487,0.531 1.626,0.356 3.21,0.667 4.92,0.549 0.056,-0.004 0.104,0.038 0.108,0.094 0.003,0.042 -0.021,0.081 -0.057,0.098 l -0.003,0.003 z'
},
{
id: 19,
part: 'right',
color: '#50c0e0',
path: 'm 81.857,32.341 c -0.837,-0.952 -1.502,-1.535 -2.219,-2.149001 -0.35,-0.306 -0.672,-0.661 -1.048,-0.994 -0.385,-0.312 -0.765,-0.677 -1.172,-1.063 -0.41,-0.379 -0.898,-0.662 -1.439,-0.733 -0.541,-0.083 -1.129,0.129 -1.656,0.189 -0.529,0.058 -1.026,-0.059 -1.545,-0.161 -0.521,-0.132 -1.04,-0.262 -1.639,-0.554 -0.061,-0.028 -0.087,-0.1 -0.06,-0.16 0.007,-0.014 0.017,-0.027 0.026,-0.037 0.495,-0.468 1.084,-0.675 1.672,-0.806 0.59,-0.102 1.199,-0.14 1.769,0.065 0.57,0.208 1.071,0.636 1.601,0.841 0.528,0.217 1.092,0.293 1.7,0.348 0.612,0.047 1.22,0.194 1.767,0.481 0.556,0.267 1.109,0.599 1.541,1.08 0.849,0.947 1.339,2.372001 0.897,3.608001 l -0.003,0.008 c -0.021,0.059 -0.086,0.09 -0.146,0.069 -0.017,-0.007 -0.033,-0.019 -0.046,-0.032 z'
},
{
id: 20,
part: 'right',
color: '#50c0e0',
path: 'm 80.406,34.426 c -2.651,-0.344 -5.047,-1.518 -7.332,-2.118 -1.141,-0.32 -2.261,-0.569 -3.429,-0.58 -0.583,-0.006 -1.165,0.047 -1.768,0.117 l -1.906,0.211 c -1.272,0.151 -2.526,0.438 -3.717,0.903 -1.194,0.462 -2.29,1.194 -3.454,1.744 -1.163,0.551 -2.403,0.908 -3.659,1.225 -1.261,0.296 -2.55,0.532 -3.89,0.516 -0.058,0 -0.104,-0.048 -0.104,-0.105 0.001,-0.036 0.021,-0.069 0.049,-0.087 1.126,-0.716 2.28,-1.264 3.446,-1.792 1.173,-0.507 2.347,-1.013 3.598,-1.325 1.25,-0.313 2.571,-0.438 3.809,-0.788 1.241,-0.345 2.436,-0.824 3.637,-1.347 0.611,-0.250001 1.22,-0.517001 1.825,-0.717001 0.646,-0.223 1.335,-0.367 2.032,-0.442 1.395,-0.155 2.85,-0.015 4.155,0.424 1.31,0.44 2.481,1.083001 3.579,1.772001 1.098,0.697 2.14,1.417 3.202,2.203 0.046,0.034 0.056,0.099 0.021,0.145 -0.021,0.032 -0.059,0.046 -0.094,0.041 z'
},
{
id: 21,
part: 'right',
color: '#50c0e0',
path: 'm 74.056,37.272 c -0.999,-0.615 -1.63,-0.656 -2.409,-0.988 -0.378,-0.158 -0.763,-0.404 -1.191,-0.613 -0.416,-0.199 -0.851,-0.604 -1.261,-0.886 -0.437,-0.308 -0.857,-0.526 -1.359,-0.614 -0.497,-0.085 -1.063,-0.036 -1.532,-0.176 -0.915,-0.349 -1.64,-0.917 -2.316,-1.847 -0.039,-0.055 -0.027,-0.131 0.027,-0.171 0.011,-0.008 0.024,-0.014 0.037,-0.018 0.582,-0.187 1.118,-0.136 1.623,-0.057 0.497,0.105 0.975,0.247 1.381,0.519 0.405,0.276 0.711,0.744 1.095,1.059 0.379,0.312 0.848,0.475 1.321,0.497 0.499,0.046 1.001,-0.109 1.509,-0.022 0.496,0.074 1.031,0.131 1.538,0.366 0.503,0.23 0.989,0.613 1.336,1.126 0.178,0.249 0.307,0.542 0.382,0.837 0.042,0.152 0.059,0.322 0.063,0.474 -0.011,0.142 -0.024,0.279 -0.061,0.43 l -0.003,0.01 c -0.015,0.064 -0.079,0.104 -0.144,0.089 -0.014,-0.003 -0.026,-0.008 -0.036,-0.015 z'
},
{
id: 22,
part: 'right',
color: '#50c0e0',
path: 'm 69.938,40.338 c -1.492,-0.182 -2.734,-0.5 -4.001,-0.863 -0.625,-0.193 -1.226,-0.468 -1.847,-0.721 -0.625,-0.234 -1.238,-0.541 -1.854,-0.887 -0.617,-0.338 -1.265,-0.583 -1.945,-0.661 -0.681,-0.083 -1.416,0.092 -2.116,0.073 -0.7,-0.021 -1.359,-0.252 -2.01,-0.517 -0.642,-0.294 -1.276,-0.633 -1.822,-1.2 -0.044,-0.045 -0.042,-0.118 0.003,-0.162 0.016,-0.015 0.036,-0.025 0.056,-0.029 0.763,-0.168 1.449,-0.153 2.136,-0.121 0.679,0.063 1.354,0.131 1.99,0.399 0.637,0.271 1.24,0.725 1.897,0.926 0.657,0.206 1.347,0.252 2.062,0.227 0.716,-0.033 1.429,-0.006 2.12,0.134 0.695,0.121 1.398,0.258 2.06,0.532 1.304,0.572 2.557,1.415 3.375,2.699 0.034,0.05 0.021,0.119 -0.029,0.153 -0.022,0.015 -0.05,0.02 -0.075,0.018 z'
},
{
id: 23,
part: 'right',
color: '#50c0e0',
path: 'm 65.02,43.23 c -1.488,-0.274 -2.665,-1.075 -3.717,-1.692 -0.53,-0.332 -0.961,-0.675 -1.516,-0.983 -0.516,-0.271 -1.081,-0.599 -1.664,-0.924 -0.589,-0.32 -1.238,-0.513 -1.902,-0.508 -0.666,0 -1.34,0.292 -2,0.406 -0.662,0.111 -1.327,0.027 -2.001,-0.082 -0.671,-0.14 -1.354,-0.315 -2.008,-0.731 -0.054,-0.034 -0.069,-0.105 -0.035,-0.159 0.011,-0.018 0.027,-0.032 0.045,-0.041 0.687,-0.349 1.345,-0.5 2.015,-0.626 0.668,-0.094 1.345,-0.172 2.024,-0.028 0.681,0.146 1.349,0.497 2.019,0.619 0.672,0.125 1.353,0.118 2.076,0.081 0.729,-0.042 1.453,0.016 2.178,0.257 0.688,0.201 1.428,0.529 1.993,0.97 1.147,0.925 1.915,1.993 2.61,3.281 0.029,0.054 0.01,0.121 -0.044,0.15 -0.024,0.011 -0.05,0.014 -0.073,0.01 z'
},
{
id: 24,
part: 'right',
color: '#50c0e0',
path: 'm 43.49,65.401 c -0.881,-0.09 -1.737,-0.677 -2.282,-1.451 -0.561,-0.774 -0.85,-1.687 -0.971,-2.563 -0.116,-0.886 -0.014,-1.751 0.125,-2.581 0.122,-0.834 0.384,-1.634 0.714,-2.402 0.324,-0.77 0.583,-1.536 0.691,-2.336 0.112,-0.799 -0.019,-1.655 0.033,-2.464 0.185,-1.616 0.774,-3.03 1.52,-4.553 0.026,-0.055 0.092,-0.078 0.147,-0.051 0.024,0.012 0.043,0.032 0.053,0.055 0.364,0.832 0.385,1.705 0.364,2.529 -0.055,0.825 -0.155,1.636 -0.458,2.392 -0.306,0.755 -0.8,1.461 -1.029,2.229 -0.233,0.767 -0.294,1.573 -0.243,2.384 0.06,0.813 0.099,1.604 0.091,2.368 0.013,0.769 0.08,1.513 0.116,2.226 0.078,1.444 0.178,2.699 1.229,4.048 0.037,0.047 0.028,0.114 -0.019,0.15 -0.022,0.018 -0.05,0.024 -0.076,0.022 L 43.49,65.401 z'
},
{
id: 25,
part: 'right',
color: '#50c0e0',
path: 'M 47.643,63.133 C 45.945,62.867 44.428,61.537 43.711,59.9 43.35,59.082 43.227,58.205 43.173,57.366 c -0.073,-0.841 0.02,-1.67 0.188,-2.476 0.161,-0.806 0.263,-1.592 0.195,-2.379 -0.063,-0.787 -0.39,-1.567 -0.556,-2.322 -0.165,-0.757 -0.151,-1.501 -0.183,-2.248 -0.004,-0.755 -0.035,-1.495 0.003,-2.357 10e-4,-0.061 0.053,-0.109 0.114,-0.107 0.026,0 0.051,0.011 0.069,0.026 0.676,0.578 1.07,1.367 1.347,2.16 0.249,0.802 0.404,1.63 0.316,2.446 -0.09,0.818 -0.407,1.613 -0.465,2.4 -0.062,0.787 0.039,1.576 0.254,2.345 0.223,0.768 0.422,1.512 0.586,2.228 0.184,0.718 0.428,1.383 0.653,2.027 0.42,1.31 1.069,2.479 2.058,3.857 0.035,0.049 0.023,0.115 -0.025,0.149 -0.023,0.018 -0.052,0.023 -0.079,0.02 l -0.005,-0.002 z'
},
{
id: 26,
part: 'right',
color: '#50c0e0',
path: 'm 52.185,59.989 c -1.542,-0.016 -2.912,-1.01 -3.815,-2.139 -0.454,-0.582 -0.758,-1.25 -1.022,-1.912 -0.283,-0.655 -0.44,-1.357 -0.522,-2.069 -0.089,-0.709 -0.229,-1.38 -0.508,-2.004 -0.276,-0.624 -0.787,-1.18 -1.105,-1.801 -0.316,-0.621 -0.421,-1.303 -0.502,-1.983 -0.051,-0.689 -0.066,-1.381 0.122,-2.134 0.015,-0.062 0.077,-0.099 0.139,-0.084 0.021,0.005 0.04,0.016 0.054,0.03 0.552,0.549 0.884,1.164 1.189,1.778 0.275,0.623 0.532,1.244 0.599,1.92 0.064,0.676 -0.043,1.41 0.116,2.065 0.155,0.656 0.483,1.255 0.911,1.795 0.434,0.537 0.838,1.066 1.184,1.607 0.364,0.534 0.755,1.029 1.086,1.548 0.66,1.063 1.265,2.04 2.172,3.204 0.037,0.048 0.028,0.117 -0.02,0.154 -0.021,0.016 -0.045,0.023 -0.068,0.023 h -0.01 z'
},
{
id: 27,
part: 'right',
color: '#50c0e0',
path: 'm 56.854,56.971 c -0.676,0.144 -1.227,0.22 -1.796,0.214 -0.56,0 -1.115,-0.045 -1.658,-0.23 -0.535,-0.209 -1.091,-0.42 -1.602,-0.768 -0.257,-0.19 -0.473,-0.401 -0.738,-0.602 -0.281,-0.198 -0.503,-0.428 -0.72,-0.628 -0.422,-0.419 -0.86,-0.787 -1.377,-1.106 -0.51,-0.324 -1.019,-0.655 -1.368,-1.094 -0.708,-0.897 -1.139,-1.827 -1.656,-2.909 l -0.005,-0.012 c -0.027,-0.056 -0.003,-0.123 0.053,-0.149 0.018,-0.009 0.037,-0.012 0.055,-0.011 0.681,0.041 1.257,0.389 1.729,0.744 0.485,0.36 0.882,0.782 1.236,1.221 0.348,0.443 0.534,0.997 0.755,1.529 0.212,0.535 0.537,0.999 0.979,1.301 0.218,0.156 0.46,0.254 0.688,0.292 0.249,0.027 0.567,-0.004 0.842,-0.013 0.559,0.002 1.091,0.078 1.646,0.145 0.547,0.088 1.086,0.304 1.609,0.605 0.514,0.296 1.037,0.714 1.401,1.285 l 0.002,0.004 c 0.036,0.056 0.02,0.13 -0.036,0.166 -0.011,0.008 -0.025,0.013 -0.039,0.016 z'
},
{
id: 28,
part: 'right',
color: '#50c0e0',
path: 'm 58.713,53.929 c -1.3,-0.37 -2.325,-0.743 -3.384,-1.228 -0.52,-0.248 -1.007,-0.58 -1.511,-0.91 -0.512,-0.31 -0.997,-0.702 -1.456,-1.147 -0.464,-0.438 -0.952,-0.812 -1.519,-1.054 -0.559,-0.251 -1.257,-0.313 -1.855,-0.599 -0.595,-0.286 -1.049,-0.794 -1.417,-1.345 -0.347,-0.569 -0.612,-1.205 -0.589,-1.928 0.002,-0.065 0.057,-0.116 0.122,-0.114 0.018,0 0.037,0.006 0.051,0.014 0.631,0.318 1.09,0.656 1.562,0.973 0.449,0.337 0.903,0.628 1.273,1.066 0.366,0.438 0.688,1.024 1.175,1.374 0.48,0.357 1.065,0.536 1.683,0.631 0.622,0.089 1.227,0.212 1.799,0.43 0.581,0.198 1.173,0.405 1.711,0.737 1.053,0.673 2.064,1.635 2.493,2.954 0.021,0.059 -0.009,0.123 -0.067,0.144 -0.024,0.008 -0.05,0.007 -0.071,0.002 z'
},
{
id: 29,
part: 'right',
color: '#50c0e0',
path: 'm 61.212,49.619 c -1.231,-0.979 -2.33,-1.242 -3.628,-1.566 -0.637,-0.164 -1.297,-0.382 -1.99,-0.588 -0.704,-0.186 -1.405,-0.467 -2.086,-0.817 -0.682,-0.341 -1.367,-0.612 -2.093,-0.745 -0.724,-0.136 -1.525,-0.046 -2.278,-0.171 -0.751,-0.129 -1.43,-0.485 -2.074,-0.885 -0.631,-0.428 -1.234,-0.915 -1.682,-1.61 -0.034,-0.052 -0.019,-0.122 0.034,-0.156 0.02,-0.013 0.043,-0.019 0.065,-0.018 0.82,0.025 1.52,0.194 2.22,0.362 0.686,0.196 1.364,0.376 1.989,0.732 0.623,0.354 1.215,0.874 1.897,1.124 0.68,0.254 1.411,0.328 2.154,0.297 0.743,-0.039 1.475,-0.051 2.204,0.029 0.738,0.066 1.51,0.138 2.267,0.404 0.749,0.268 1.505,0.679 2.113,1.288 0.604,0.599 1.042,1.409 1.063,2.227 v 0.006 c 0.002,0.061 -0.046,0.11 -0.105,0.111 -0.026,10e-4 -0.052,-0.008 -0.07,-0.024 z'
},
{
id: 30,
part: 'right',
color: '#333333',
path: 'm 44.481,40.941 c 1.017,0.037 2.037,0.255 3.025,0.457 0.99,0.199 1.979,0.322 2.979,0.386 2.011,0.127 3.989,0.078 6.046,-0.01 1.041,-0.026 2.134,-0.015 3.27,0.191 0.61,0.094 1.279,0.362 1.775,0.617 0.521,0.26 0.991,0.537 1.448,0.819 0.912,0.563 1.766,1.149 2.604,1.704 0.418,0.276 0.832,0.547 1.23,0.787 0.388,0.234 0.813,0.466 1.046,0.532 1.077,0.303 1.705,1.422 1.402,2.5 -0.303,1.077 -1.422,1.705 -2.499,1.402 -0.162,-0.046 -0.314,-0.11 -0.455,-0.19 l -0.198,-0.115 c -0.675,-0.389 -1.08,-0.748 -1.513,-1.109 -0.419,-0.359 -0.802,-0.716 -1.181,-1.068 -0.752,-0.704 -1.474,-1.399 -2.198,-2.035 -0.74,-0.633 -1.42,-1.224 -2.088,-1.449 -0.831,-0.304 -1.77,-0.483 -2.752,-0.622 -1.995,-0.255 -4.074,-0.529 -6.08,-0.987 -1.008,-0.229 -2.009,-0.522 -2.969,-0.881 -0.956,-0.365 -1.889,-0.728 -2.892,-0.929 z'
}, {
id: 31,
part: 'tentacleleft',
color: '#666666',
describe: '左触角',
type: {
'fill': 'none',
'stroke': '#666666',
'stroke-linecap': 'round',
'stroke-miterlimit': 10,
'display': 'inline'
},
path: 'm 43.415999,18.337999 c 5.128,3.359 3.23,9.021 3.023,14.232001'
}, {
id: 32,
part: 'tentacleright',
color: '#666666',
describe: '右触角',
type: {
'fill': 'none',
'stroke': '#666666',
'stroke-linecap': 'round',
'stroke-miterlimit': 10,
'display': 'inline'
},
path: 'm 58.151,21.486999 c -5.571001,1.017 -9.579001,5.756 -11.209001,10.957001'
}, {
id: 33,
part: 'worm',
type: {
'fill': '#333333',
'stroke': '#4d4d4d',
'stroke-miterlimit': 10,
'display': 'inline'
},
path: 'm 47.182,31.385 c -0.035,-0.026 -0.068,-0.051 -0.067,-0.053 0.917,0.691 1.639,2.04 1.126,3.182 -0.457,1.018 -1.834,0.916 -2.337,1.886 -0.635,1.224 0.695,2.549 0.069,3.795 -0.609,1.213 -2.434,1.623 -2.253,3.232 0.074,0.657 0.399,1.268 0.416,1.933 0.012,0.46 -0.088,0.938 -0.148,1.394 -0.243,1.848 -4.971,17.096 -7.979,14.627 -2.196,-1.802 -0.902,-6.301 -0.329,-8.535 0.977,-3.811 2.766,-7.056 4.943,-10.312 1.065,-1.593 -0.78,-3.521 0.268,-5.147 0.624,-0.968 1.914,-1.008 2.63,-1.822 0.987,-1.122 -0.336,-2.543 0.908,-3.563 0.625,-0.514 2.141,-1.056 2.833,-0.56 10e-4,0.002 -0.041,-0.028 -0.08,-0.057 z'
}
]
paper.setStart();
$.map(butterflyPaths, function (obj) {
drawPath(obj);
});
paper.setFinish();
// 我们来加一下代码放大缩小坐标系(放大蝴蝶)
paper.setViewBox(0, 0, 100, 100);
为我们的蝴蝶添加事件：
鼠标覆盖变色，移走复原，点击获取对象：
本节源代码地址：butterfly-raphael
参考资料：
图灵的RaphaelJS图书
学习RaphaelJS矢量图形包--Learning Raphael JS Vector Graphics中文翻译（一）