SVG画圆形进度条

<!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>

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huangyibin628/article/details/46583141
文章标签: 黄艺斌 HTML5 svg
个人分类: HTMl5 CSS3
所属专栏: HTML5自由者
想对作者说点什么? 我来说一句

SVG画矩形、半圆、三角形

dusea dusea

2015-10-29 16:40:30

阅读数:7569

SVG绘制圆形

baohanqing baohanqing

2013-12-30 20:36:14

阅读数:561

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭