用 svg 画圆

用 svg 画圆

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

  1. 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>
  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 代表圆的半径。

描边点状化

<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 点方向。
我来评几句
登录后评论

已发表评论数()

相关站点

热门文章