用 svg 画圆

用 svg 画圆

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

  1. SVG 中基本的形状(basis shape)有 circle、ellipse、line、ploygon、polyline、rect,环形的展示在这里使用的是 circle;

基础圆形

image.png

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

描边点状化

image.png

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

动起来

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

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

推荐阅读