本文主要想谈一谈前端关于渐变圆环的制作，效果图如下：
此为圆环的静态图
注意：部分iphone 不支持css3旋转大于等于90度，故页面中所需旋转的均改为了89deg；
SVG有两种方式写渐变的：线性渐变linearGradient或放射性渐变radialGradient，但是却不能通过这两种方式实现 角度渐变 （当然，如果有人能实现角度渐变，非常欢迎推荐）
我是通过借助SVG能填充图片的功能实现，为实现上述渐变圆环，我的填充图如下：
填充图片
关于SVG如何给路径填充背景图在此就不再细说，可以查看教程，相关教程有很多
直接上代码：
<svg width="100%" height="100%" viewbox="0 0 160 160"></svg>
如果是适配手机，需要等比例缩放，这就需要设置viewbox，表示svg的左上角坐标和宽高
<defs>
<pattern id="fill-img" patternUnits="userSpaceOnUse" width="160" height="160">
<image class="img-transform" xlink:href="https://img.haomeiwen.com/i4890701/417c25e40509aefc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
x="0"y="0"width="160"height="160">
</image>
</pattern>
</defs>
其中的样式 定义如下：
.img-transform{
transform:rotate(89deg);
transform-origin:50%50%;
}
背景图已经定义完成，接下来就是如果绘制圆环并使用背景图了，代码如下：
<circle class="circle-transform mapSvgDraw delay2-0" fill="none" stroke="url(#fill-imgs4)" stroke-width="15" stroke-miterlimit="1" cx="80" cy="80" r="72" stroke-dasharray="380 1000" stroke-dashoffset="380" stroke-linecap="round"/>
stroke-dasharray： 指定短划线和缺口的长度，如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值
stroke-dashoffset：指定了dash模式到路径开始的距离，一般通过此值形成动画
其中的circle-transform 定义的是当前圆环所要旋转或位移的量，样式如下：
.circle-transform{
transform:translate3d(-1px,-1px,0)rotate(-89deg);
transform-origin:50%50%;
}
不管是图片或圆环的样式定义，都可以根据自己的需要去定义
到目前为止，圆环已成，如果需要添加动画效果，可参考以下代码
.mapSvgDraw{
// stroke-dasharray: 1000;
// stroke-dashoffset: 1000;
-webkit-animation: mapSvgDraw1slinearboth;
animation: mapSvgDraw1slinearboth;
}
@-webkit-keyframes mapSvgDraw {
0%{}
100%{
stroke-dashoffset:0;
}
}
@keyframes mapSvgDraw{
0%{}
100%{
stroke-dashoffset:0;
}
}
以上，即为所有代码，如有不懂，可查阅相关资料
参考文献：
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Patterns
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dashoffset
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dasharray
文档信息
版权声明：自由转载-非商用-非衍生-保持署名
发表日期：2017年3月13日
网友评论