使用html5 SVG设计日食圆

问题描述

我正在尝试使用以下代码设计cicrle：

.eclipse {
  border-radius: 50%;
  border: 1px dashed #1f2b6a;
  background: none;
}

<svg class="eclipse" height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="white" stroke-width="3" fill="#1f2b6a" />
  Sorry,your browser does not support SVG.  
</svg>

我正在设计这个

有人可以帮我完成它吗？

解决方法

$jobs = Get-ChildItem d:\Path\* -recurse -include *.pdf,*.idx |
Select-Object -expand basename |
Sort-Object

$jobs | foreach-object{
     if ((test-path d:\Path\$_.idx) -and (test-path d:\path\$_.pdf)){
        move-item d:\Path\$_.idx d:\Path
        move-item d:\path\$_.pdf d:\Path
        }
      else {
        ....
        }
       }

,

您可以这样做：

.dashed-border{
display: flex;
   align-items: center; 
   justify-content: center;
  width: 300px;
  height: 300px;
  border: dashed 2px #4a1693;
  border-radius: 50%;
  
}

.circle{
  
  display: flex;
   align-items: center; 
   justify-content: center;
   width: 250px;
  height: 250px;
  border-radius: 50%;
  background-color: #4a1693;
}

.circle p{
  font-size: 72px;
  color: white;
}

<div class="dashed-border">
  <div class="circle">
    <p>1</p>
  </div>
</div>

这里是svg代码

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FFFFFF;}
    .st1{fill:none;stroke:#4A1693;stroke-width:4;stroke-miterlimit:10;stroke-dasharray:65.3028,65.3028;}
    .st2{fill:#4A1693;stroke:#000000;stroke-miterlimit:10;}
    .st3{fill:none;}
    .st4{font-family:'MyriadPro-Regular';}
    .st5{font-size:90px;}
</style>
<g>
    <circle class="st0" cx="249" cy="258" r="145.5"/>
    <circle class="st1" cx="249" cy="258" r="145.5"/>
</g>
<circle class="st2" cx="250.5" cy="258.5" r="132"/>
<rect x="223.1" y="219.5" class="st3" width="103.8" height="86.8"/>
<text transform="matrix(1 0 0 1 223.1211 283.4487)" class="st0 st4 st5">1</text>
</svg>