🗒️SVG画圆
2022-4-5
| 2024-3-22
0  |  阅读时长 0 分钟
date
icon
password
description
permalink
categories
type
status
slug
summary
tags
category
updated
Mar 22, 2024 09:10 AM

SVG基础属性介绍

  • width、height:分别表示SVG元素的宽高。
  • viewBox:
  • 前两个参数是对SVG元素做位移使用,通常设置为0;
  • 后两个参数表示SVG元素可容纳的大小,具体可参考SVG属性之viewBox
 

circle

  • cx、cy:圆心的位置。
  • r:表示半径。
  • fill:圆的填充色。
  • stroke-width:边框宽度。
  • stroke:边框的填充色。

模拟一个百分比

  • stroke-dasharray:顾名思义,dash表示虚线,stroke-dash可理解为将边框设置为虚线,stroke-dasharray表示这个属性可以接收多个值,实际上一般是接收两个值,例如:
  • stroke-dasharray: 2,2,表示边框的长度是200,间隔200的宽度,再有200的虚线长度...,依次类推,呈现的效果是 -- -- -- --
  • stroke-dashoffset:设置边框的偏移距离,这个属性是核心,通过设置它的偏移位置来模拟出百分比。
通过改变stroke-dasharray的值来完成饼状效果,其中第一个44的值是要画圆的周长,第二个是圆的周长,因为半径一样所以通过覆盖来完成饼状图。
  • Html
  • Css
  • Linux 笔记本合上盖子依旧运行Dom节点定义数据
    • Waline
    目录