用-svg-画圆

jiezi

5 年前

使用 SVG 需要在最外层包含 <svg></svg>。

SVG 中基本的形状（basis shape）有 circle、ellipse、line、ploygon、polyline、rect，环形的展示在这里使用的是 circle;

html {font-size: 16px;} 
body {font-family: sans-serif;}

.contain {
  display: flex;
  justify-content: center;
  padding: .65rem;
  box-sizing: border-box;
}
<div class="contain">
  <svg width="200px" height="200px" viewBox="0 0 200 200">
    <circle class="path" 
            stroke="hotpink" 
            fill="none" 
            stroke-width="5" 
            cx="100" cy="100" r="80" />
  </svg>
</div>

SVG 元素使用 width, height 来定义自身在页面上的 viewport，配合 viewbox 属性，来对内部子元素的单位进行计算。width、height 代表 SVG 的大小。
ViewBox 的四个值也是用来设置自身大小的，相当于在 SVG 上铺了一层布，然后在这个布上画东西，这个布的大小随便你定，只要它超过了 SVG 的大小，那么就会被默认整体缩小。也可以不设置 viewBox，那么如果你的 circle 如果大小正好超过了 SVG 的大小，就会被剪切掉。
Fill 属性是指圆环中兴部分填充的颜色，这里设置的是 none。stroke 是指圆环描边的填充颜色，配合 stroke-width 来设置描边的宽度。
cx、cy 表示圆心部分的坐标，r 代表圆的半径。

<circle class="path" 
            stroke="hotpink" 
            fill="none" 
            stroke-width="5" 
            stroke-dasharray="10"
            cx="100" cy="100" r="80" />
<circle class="path" 
            stroke="hotpink" 
            fill="none" 
            stroke-width="5" 
            stroke-dasharray="50"
            cx="100" cy="100" r="80" />
<circle class="path" 
            stroke="hotpink" 
            fill="none" 
            stroke-width="5" 
            stroke-dasharray="100"
            cx="100" cy="100" r="80" />

stroke-dasharray 属性，可以将图形的描边进行「点状化」，这里需要理解的是，「点状化」的「点」，其大小是可以设置的，并不真的就是那么一个「·」，可以变长或者变短。上面例子中的三个 circle 分别设置 stroke-dasharray 为 10，50，100；
所以如果 circle 的点的长度正好等于 circle 边长，那么「点」看上去就是 circle 的边。
需要注意的是，因为一般都设置了颜色，所以点与点之间的的空白可能不会引起注意，其实它也是一个点，只不过是透明的，长度仍然和其他一样。

经常可以看到一些圆形进度条，可以完全使用 css 实现，但是比较复杂，使用 SVG 比较简单。
codeOpen

stroke-dashoffset 可以使上一步中使用 stroke-dasharray 生成的「点」沿着 path 移动，默认情况下，如果是圆形，那么是逆时针移动；
将前面的 circle 的 stroke-dasharray 长度设置为它的周长。设置它的 stroke-dashoffset 为它的周长，所以它会逆时针移动一个周长，但是由于前面的 stroke-dasharray 也设置的是一个周长，所以当逆时针移动后，stoke-dasharray 设置的点的空白部分会填充这个圆。像前面那样调整了之后，初始状态看起来就像是进度为 0 的进度条。之后通过改变 stroke-dasharray 的值来使前面提到的点动起来, 来达到起来是一个在运动的进度条的效果, 或者使用下面的方式。
circle 描边的「起始位置」在 circle 在 x 轴方向，使用 transform: rotate() 逆时针旋转 90 度使「起始位置」定位到 12 点方向。

用-svg-画圆

用 svg 画圆

基础圆形

描边点状化

动起来