SVG实现定点进度条

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        svg{
   
            border: 1px solid #
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要创建一个SVG圆环进度条,可以使用<path>元素和stroke-dasharray属性来定义圆弧的虚线样式。以下是一个简单的示例代码,展示了如何创建一个50%的圆环进度条: ```html <svg width="100" height="100"> <path d="M 50,50 m -50,0 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0" fill="none" stroke="black" stroke-width="10" stroke-dasharray="157 157" stroke-linecap="round" /> </svg> ``` 在这个示例中,我们使用了两个相同的圆弧路径来创建一个完整的圆环。首先,我们使用圆心为(50,50)、半径为50的圆弧路径来绘制圆环的上半部分。然后,我们再次使用相同的路径来绘制圆环的下半部分,但是需要将圆弧的方向改为逆时针方向。 在路径的d属性中,我们使用了小写字母a来绘制圆弧,同时将起点和终点坐标都设置为(50,50)。这里的圆弧半径也是50,所以路径的长度应该是圆的周长,因此我们需要使用两个圆弧路径来绘制完整的圆环。 接下来,我们使用stroke-dasharray属性来定义虚线样式。这里我们将其设置为"157 157",表示第一个线段占总路径长度的50%,第二个线段占总路径长度的另外50%。由于圆弧的周长是π×半径×2,所以这里的总路径长度为157(即π×50×2)。 最后,我们使用stroke-linecap属性来定义线段的端点样式,这里我们将其设置为"round",表示使用圆形端点样式。 上述代码将创建一个50%的圆环进度条,其中圆环的线宽为10px,线段长度为157px,使用圆形端点样式。你可以根据自己的需要来调整这些属性,创建不同样式的圆环进度条

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值