svg绘制曲线动态进度条避免canvas锯齿问题
本例使⽤css3 特性 svg动态描边绘制圆形进度条。
需要进度条有动态效果，使⽤canvas绘制时，曲线会出现锯齿现象。消除锯齿⽐较⿇烦，于是使⽤svg动态描边实现，还可避免复杂的js绘图。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test</title>
<meta name="viewport"content="width=device-width, initial-scale=1">
<meta name="format-detection"content="telephone=no"/>
<style>
.edu_icon_2{
width: 190px;
margin:0 auto;
height: 120px;
overflow: hidden;
position: relative;
padding-left: 5px;
}
/*svg*/
circle {
/
*使⽤zepto css或attr动态设置只会⾃动加逗号效果：stroke-dasharray: 300px,234px  把动态设置都移到style标签中去*/
/*stroke-dasharray: 300 234;*/
/*通过JS 来修改stroke-dasharray的值*/
/*偏移量默认重3点钟位置开始偏移300到8.钟位置*/
stroke-dashoffset: 300;
-webkit-animation: dash 1s linear;
-moz-animation: dash 1s linear;
-o-animation: dash 1s linear;
animation: dash 1s linear;
}
svg{
border-radius: 50%;
background:#fbdabb;
/*冻结额度的SVG背景颜⾊为*/
/*background: #E0E0E0;*/
svg和canvas的区别position: relative;
z-index: 2;
}
.qianse{
position: absolute;
top: 10px;
left: 15px;
border-radius:50%;
background:#ffffff;
width: 160px;
height: 160px;
z-index: 3;
}
</style>
</head>
<body >
<!-- SVG版本-->
<div class="edu_icon_2">
<svg width="180"height="180"version="1.1"xmlns="/2000/svg">
效果图：
<circle cx="90"cy="90"r="85"stroke="#F6681C"stroke-width="10"fill="transparent"/> <!-- 冻结额度的svg 颜⾊值为：#B4B4B4-->
<div class="qianse"></div>
</svg>
</div>
</body>
<script>
//svg版本
var style = ateElement("style");
style.innerHTML = 'circle{stroke-dasharray: 300 234} @keyframes dash {from {stroke-dasharray: 0 534; } to {stroke-dasharray: 300 234; } };';        ElementsByTagName("head")[0].appendChild(style);
//        通过控制显⽰周长来达到⽐例效果最⼤为330；最⼩0；
//        修改的时候还要同时修改css中的circle的 stroke-dasharray的值；
</script>
<script></script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。