Skip to content
久久日记本
曾经年少爱追梦,一心只想往前飞
  • 首页
  • 博客
    • 博客历史
    • 主题
    • 个人文集
  • 关于
    • 正在读的书
    • 作品归档
    • 2018作品归档
    • 联系我
  • 友情链接
  • 留言板
❄
❅
❆
❄
❅
❆
❄
❅
❆
❄
Front-End

使用Raphael绘制svg图像

Posted on 2016年12月8日 by 九九 / 3613 Views

使用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 一样,可以填充渐变颜色:

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"
        })
      );
  }
}

blog

尝试为它们加上事件试试吧

你可以在jsFiddle看到一个取色器效果图

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,

blog

我们参考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);

blog

为我们的蝴蝶添加事件:

鼠标覆盖变色,移走复原,点击获取对象:

blog

本节源代码地址:butterfly-raphael

参考资料:

图灵的RaphaelJS图书

学习RaphaelJS矢量图形包–Learning Raphael JS Vector Graphics中文翻译(一)

Raphael, SVG, 图音视频
九九
过去的我们,现在的自己,往事,终会随风而逝。 View all posts by 九九 →

Post navigation

Older post
React事件传递
Newer post
2016小记

标签云

2019ncov Android ASP.NET Baby C# C/C++ CSS Div DX11 flask front-end GAE Git Java JJProject JS Life MSSQL MVC OpenSource Oracle Python React React-Native Software Tools Vue Webpack Website Window WP7 乱记 十年旧梦 天气 宝宝成长日记 小说 工作 情感 故障 散文 日记 网新实训笔记 花落梧桐 诗间集 转载

时光机

  • 2023年3月
  • 2023年2月
  • 2022年12月
  • 2022年4月
  • 2022年3月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年6月
  • 2021年5月
  • 2021年4月
  • 2021年3月
  • 2021年2月
  • 2021年1月
  • 2020年5月
  • 2019年12月
  • 2019年10月
  • 2019年9月
  • 2019年6月
  • 2019年5月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年7月
  • 2017年3月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年7月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年8月
  • 2015年7月
  • 2015年4月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2014年5月
  • 2014年4月
  • 2014年3月
  • 2014年2月
  • 2014年1月
  • 2013年12月
  • 2013年11月
  • 2013年10月
  • 2013年9月
  • 2013年8月
  • 2013年7月
  • 2013年6月
  • 2013年5月
  • 2013年4月
  • 2013年3月
  • 2013年1月
  • 2012年11月
  • 2012年10月
  • 2012年9月
  • 2012年8月
  • 2012年7月
  • 2012年6月
  • 2012年5月
  • 2012年4月
  • 2012年3月
  • 2012年2月
  • 2012年1月
  • 2011年12月
  • 2011年11月
  • 2011年10月
  • 2011年9月
  • 2011年8月
  • 2011年6月
  • 2011年5月
  • 2011年4月
  • 2011年3月
  • 2011年2月
  • 2010年12月
  • 2010年11月
  • 2010年10月
  • 2010年9月
  • 2010年8月
  • 2010年6月
  • 2010年5月
  • 2010年2月
  • 2010年1月
  • 2009年12月
  • 2009年11月
  • 2009年10月
  • 2009年9月
  • 2009年8月
  • 2009年7月
  • 2009年6月
  • 2009年5月
  • 2009年4月
  • 2009年3月
  • 2009年2月
  • 2009年1月
  • 2008年8月
  • 2008年6月
  • 2008年5月
  • 2008年4月
  • 2008年2月
  • 2007年11月
  • 2007年8月
  • 2007年6月
  • 2007年5月
  • 2007年4月
  • 2007年3月
  • 2007年2月
  • 2007年1月
  • 2006年10月
  • 2006年8月
© 2006 - 2023 久久日记本
Powered by WordPress | Theme: Graphy for 99diary