SVG画圆形进度条

最新推荐文章于 2023-11-27 15:22:09 发布

一喵呜

最新推荐文章于 2023-11-27 15:22:09 发布

阅读量6.9k

点赞数

分类专栏： HTMl5 CSS3 HTML5自由者文章标签：黄艺斌 HTML5 svg

本文链接：https://blog.csdn.net/html5_/article/details/46583141

版权

HTML5自由者同时被 3 个专栏收录

94 篇文章 13 订阅

订阅专栏

HTMl5

81 篇文章 0 订阅

订阅专栏

CSS3

35 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
     <meta charset="UTF-8">
     <title>HTML5自由者</title>
     <style>
          #svgForStroke {
               position: absolute;
              top: 0;
              left: 0;
              width: 200px;
              height: 200px;
              stroke-dasharray: 180%;
              stroke-dashoffset: 0%;
              stroke: #ED6E5C;
               /*stroke-linecap:round;*/
              fill: none;
              -webkit-transform: rotate(-90deg);
              -moz-transform: rotate(-90deg);
              -ms-transform: rotate(-90deg);
              -o-transform: rotate(-90deg);
              transform: rotate(-90deg);
          }
         
     </style>
</head>
<body>
     <svg id="svgForStroke" xmlns="http://www.w3.org/2000/svg">
          <circle cx="50%" cy="50%" r="30%" stroke-width="10%"></circle>
     </svg>
     <script></script>
</body>
</html>

一喵呜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SVG画圆形进度条

HTML5自由者 SVG画圆形进度条 #svgForStroke { position: absolute; top: 0; left: 0; width: 200px; height: 200px; stroke-d
复制链接

扫一扫