CFXIXI工作室首页
CF西西的博客 | SVG画圆
首页 >

SVG画圆

1. 十二月 2016
使用path画圆可以确定起始位置

<div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"> <div class="ant-progress-inner" style="width: 132px; height: 132px; font-size: 27.12px;"> <svg class="rc-progress-circle " viewBox="0 0 100 100"> <path class="rc-progress-circle-trail" d="M 50,50 m 0,-47 a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0"></path> <path class="rc-progress-circle-path" d="M 50,50 m 0,47 a 47,-47 0 1 1 0,-94 a 47,47 0 1 1 0,94" stroke-linecap="round" stroke="#108ee9" stroke-width="6" fill-opacity="0" style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 73.8274px; transition: stroke-dashoffset 0.3s ease 0s, stroke 0.3s ease;"></path> </svg> <span class="ant-progress-text">75%</span> </div> </div>