本文只要描述利用svg circle标签的实现方法
-
知识点准备（摘自阮一峰老师的网络日志）
1.
<svg>标签SVG 代码都放在顶层标签``之中。下面是一个例子。
<svg width="100%" height="100%"> <circle id="mycircle" cx="50" cy="50" r="50" /> </svg><svg>的width属性和height属性，指定了SVG图像在` HTML 元素中所占据的宽度和高度。除了相对单位，也可以采用绝对单位（单位：像素）。如果不指定这两个属性，SVG 图像默认大小是300像素（宽） x 150像素（高）。如果只想展示 SVG 图像的一部分，就要指定
viewBox属性。<svg width="100" height="100" viewBox="50 50 50 50"> <circle id="mycircle" cx="50" cy="50" r="50" /> </svg>属性的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度。上面代码中，SVG 图像是100像素宽 x 100像素高，`viewBox属性指定视口从(50, 50)这个点开始。所以，实际看到的是右下角的四分之一圆。注意，视口必须适配所在的空间。上面代码中，视口的大小是 50 x 50，由于
SVG图像的大小是 100 x 100，所以视口会放大去适配SVG图像的大小，即放大了四倍。如果不指定
width属性和height属性，只指定viewBox属性，则相当于只给定SVG图像的长宽比。这时，SVG图像的默认大小将等于所在的 HTML 元素的大小。
2.circle标签
``标签代表圆形。
<svg width="300" height="180"> <circle cx="30" cy="50" r="25" /> <circle cx="90" cy="50" r="25" class="red" /> <circle cx="150" cy="50" r="25" class="fancy" /> </svg>
上面的代码定义了三个圆。标签的`cx`、`cy`、`r`属性分别为横坐标、纵坐标和半径，单位为像素。坐标都是相对于画布的左上角原点。
class属性用来指定对应的 CSS类。
.red { fill: red; } .fancy { fill: none; stroke: black; stroke-width: 3pt; }
SVG 的 CSS 属性与网页元素有所不同。
- fill：填充色
- stroke：描边色
- stroke-width：边框宽度
3.animate标签
``标签用于产生动画效果。
<svg width="500px" height="500px"> <rect x="0" y="0" width="100" height="100" fill="#feac5e"> <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" /> </rect> </svg>
上面代码中，矩形会不断移动，产生动画效果。
animate的属性含义如下。
attributeName：发生动画效果的属性名。from：单次动画的初始值。to：单次动画的结束值。dur：单次动画的持续时间。repeatCount：动画的循环模式。fill:可以让动画结束后停留 可选值 freeze：停在最后一帧 remove：回到初始帧
可以在多个属性上面定义动画。
<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" /> <animate attributeName="width" to="500" dur="2s" repeatCount="indefinite" />
-
两种方式主要利用了
svg的stroke-dasharray属性控制描边幅度stroke-dasharray属性通俗来讲就是把描边变成点状形态，类似border的dashed的效果stroke-dasharray可接受多个参数例如：
1.stroke-dasharray: 10 表示 先描边10个单位 在空10个单位 在描边10个单位 在空10个单位...... 直到描完整个边 2.stroke-dasharray: 10 20 表示 先描边10个单位 在空20个单位 在描边10个单位 在空20个单位...... 直到描完整个边 3.stroke-dasharray: 10 20 30 表示 先描边10个单位 在空20个单位 在描边30个单位 在空10个单位...... 直到描完整个边
以下是具体实现方式
1.利用svg的animate标签实现
<svg height="400" width="400" viewBox="0 0 400 400">
<circle
cx="200"
cy="200"
r="170"
fill="yellow"
stroke="red"
stroke-width="30"
stroke-dasharray="0 1200"
stroke-linecap="round"
>
<animate fill="freeze" attributeName="stroke-dasharray" from="0 1200" to="500 1200" dur="2s" repeatCount="1" />
</circle>
</svg>
//此处stroke-dasharray的第二个参数只要能够大于整个圆环路径周长就可以，通过控制animate中 to 的属性，控制描边幅度,具体像圆环这种效果可以画两个circle，一个有描边，一个按上述控制就是圆环进度条的样子。
2.利用js动态控制 stroke-dasharray属性，然后再css中加上过渡动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
circle {
//圆环的过渡动画
-webkit-transition: stroke-dasharray 800ms;
transition: stroke-dasharray 800ms;
}
</style>
</head>
<body>
<svg width="440" height="440" viewbox="0 0 440 440">
<circle cx="220" cy="220" r="170" stroke-width="50" stroke="blue" fill="none"></circle>
<circle cx="220" cy="220" r="170" stroke-width="50" stroke="red" fill="none" transform="matrix(0,-1,1,0,0,440)" stroke-dasharray="0 1069"></circle>
</svg>
<script>
let percent = 0.7 //从接口获取到的圆环填充百分比
let circle = document.querySelectorAll("circle")[1];
let perimeter = circle.getTotalLength() //圆环的周长
circle.setAttribute('stroke-dasharray', perimeter * percent + " " + perimeter * (1- percent));
</script>
</body>
</html>
网友评论