使用SVG开发音乐播放器（一）

TML5中有两个非常强大的绘图标签，它们分别是canvas和svg，canvas有着强大的绘制图像以及渲染能力， 而svg则有着强大的矢量图绘制功能。在功能上其实个人依然认为canvas更胜一筹，因为有webgl助阵，但是个人而言更加关注svg。 这里我尝试着使用一个开发例子来让大家更了解我心里的svg。

设计图

上面的图是我在花瓣网找到的作品，感觉挺漂亮的，并非我的设计作品，也并没有查到版权信息。如果影响到了作者的版权请联系我， 可以让我删除该系列内容或者进行出处申明。

以上就是我们要制作的播放器的模板，几个按钮、一个封面、两个文字、一个进度条

画图

现在我们要开始制作了，这次我们的任务主要就是画出一个和上面差不多的播放器。我们需要adobe illustrator， 因为它可以生成SVG文件（其他可以生成SVG文件的也可以），我这里使用的是adobe illustrator CC。

1.根据设计图我新建一个400px*450px像素的画布。

2.我们画一个圆角矩形作为底部，加入一像素深色边框。在网上找一些图标载入到文件中，并设置其颜色及布局如下图所示。 然后将播放、下一首、上一首图标和后面的圆形编组，再将这三个按钮编组。在AI中编组相当于HTML中放到容器中，方便之后整体操作。

3.照一张图片作为封面，在上面画一个圆对齐，选择两个对象按Ctrl+7创建蒙版。然后画一个深色的背景圆。 接下来画一个比图片稍大比背景圆稍小的圆，去掉填充并设置好边框色和边框宽。然后像下图那样设置成虚线边框。

然后可以得到和下面这样的效果

4.最后我们在合适的位置加入文字，给封面增加一个黑色、透明度30%的覆盖层。到此为止我们的画图基本完成了。

5.在导出文件之前我们打开图层面板给核心图层命名。在SVG中图层名将转换为ID，供我们之后代码引用。

6.最终我们只需要将它保存为SVG文件放在合适的位置供之后HTML调用即可

编码时间

接下来我们可以开始搭建我们的项目了。这里我们有两种选择:

1.在Web服务器中使用，使用我的lcg框架的lcg.spanle扩展（其实只做了很简单的功能）

2.将SVG的内容直接复制到body中去

因为如果直接载入外部文件需要ajax，而本地无法ajax所以需要放在web服务器内。下面我所使用的就是方法1。

基本配置

和其他使用我的框架项目一样，开头引入框架和框架相关样式

<script type="text/javascript" src="js/lcg.js"></script>
<script type="text/javascript" src="js/lcg.spanle.js"></script>
<link rel="stylesheet" type="text/css" href="css/lcg.spanle.css">

结尾执行一下init_all

<script type="text/javascript">
    lcg.init_all();
</script>

body中加入spanle标签，其中src就是svg所在地址。

<spanle src="svg/player.svg" id="player"></spanle>

此时已经可以成功的将SVG载入到HTML中来了

编写样式

一些基本样式

body,html{
    height:100%;
}

body{
    margin:0px;
    background-color:#eee;
}

body *{
    font-family:"微软雅黑";
    -webkit-user-select:none;
}

容器的样式

#player{
    width:400px;
    height:450px;
    margin:20px auto;
    display:block;
}

播放、切歌按钮组的样式

#menu>g{
    transition:transform 0.2s,opacity 0.3s;
}

#menu>g:hover{
    transform:scale3d(1.05,1.05,1);
    opacity:0.9;
}

#menu>g:active{
    transform:scale3d(0.95,0.95,1);
    opacity:1;
}

什么？给SVG元素加入样式。没错，SVG元素同样也可以有样式，但是IE只支持部分样式。比如上面的样式中， IE支持opacity，但是不支持transform。所以在IE下Hover动画是没有大小变化的。因此例子请使用Chrome浏览器查看。

这里使用的是ID选择器，menu是我们之前在AI中三个按钮的编组，所以可以直接使用子节点选择器进行样式设置。

下面是将进度条旋转一下。

#plan{
    transform:rotateZ(-90deg);
}

进度条的实现思想

现在我们已经做好了基本的样式，在本次的最后来说说SVG中圆形进度条是多么方便吧。

在SVG中有两个属性可以控制对象的边框虚线，分别是stroke-dasharray和stroke-dashoffset。他们有什么功能呢？ 我们看看我们保存的SVG文件可以发现进度条的stroke-dasharray就是我们在AI中设置的虚线长度。如果我们设置其为50， 那么我们将得到一个每段长度都为50的边框，间距也是这个长度。那么我们如果把它设置成圆的周长就可以有一圈的虚线和一圈的间距。 而stroke-dashoffset就是设置虚线的偏移，通过偏移可以让虚线移动指定的距离。那么我们通过它就可以直接移动进度条了。

接下来看看代码var dom = document.getElementById("player");
var plan;

dom.onload = function(){
    plan = dom.querySelector("#plan");
    var maxlen = plan.getAttribute("r") * 2 * 3.14159;
    plan.setAttribute("stroke-dasharray",maxlen);
}

var now = 0;
var run = function(){
    setTimeout(run,20);
    now--;
    if(plan)
        plan.setAttribute("stroke-dashoffset",now);
}
run();

我们先获取spanle对象并绑定onload方法。在载入完成之后我们获取到plan节点并通过半径计算周长，并将stroke-dasharray 设置为一周长。之后我们做了个定时器，每20毫秒改变now的值，并设置进度条的stroke-dashoffset让虚线移动。

本次成果

现在的成果例子:例子

请使用Chrome浏览器，因为还没有开始做兼容性

后话

之后会抽时间慢慢的做完这个例子，希望能帮助初学SVG的人。当然也希望遇到SVG大神啦

文章为原创内容并且是个人观点和见解，如有错误或问题欢迎指出
本文的地址为 : http://evillcg.com/blog/item/1462875477/