如何在SVG中绘制带边框的圆？

Question

如何在SVG中绘制带边框的圆。像附件图片一样？

<svg width="25%" height="25%" viewBox="0 0 120 120">
	
	<circle class="default" cx="25" cy="25" r="24" fill="none" stroke="black" stroke-width="1"/>
		
		   <circle class="default" cx="25" cy="25" r="16" fill="none" stroke="black" stroke-width="1"/>

</svg>

Answer 1

使用stroke-dasharray将圆分成8个部分

• 半径为20的圆周为2 * 3.14 * 20 = 125.6
• 分为8个部分，以得到圆的4个扇区，每个扇区 将有一条线和一个空格-125.6 / 8 = 15.7

stroke-dasharray="15.7, 15.7"，其中第一个值是短划线的长度，第二个值是空格

<svg width="30%" height="30%" viewBox="0 0 120 120">
	<!-- Outer circle -->
	<circle class="default" cx="25" cy="25" r="24" fill="none" stroke="black" stroke-width="1"/>
	  <!-- The circle is divided into 4 sections -->
   	<circle class="default" cx="25" cy="25" r="20" fill="none" stroke="black" 
		   stroke-width="8" stroke-dasharray="15.7, 15.7 "/>  
		<!--Inner circle -->		
		   <circle class="default" cx="25" cy="25" r="16" fill="none" stroke="black" stroke-width="1"/>

</svg>

更新

8个扇区

<svg width="30%" height="30%" viewBox="0 0 120 120">
	<!-- Outer circle -->
	<circle class="default" cx="25" cy="25" r="24" fill="none" stroke="black" stroke-width="1"/>
	  <!-- The circle is divided into 4 sections -->
   	<circle class="default" cx="25" cy="25" r="20" fill="none" stroke="black" 
		   stroke-width="8" stroke-dasharray="7.85"/>  
		<!--Inner circle -->		
		   <circle class="default" cx="25" cy="25" r="16" fill="none" stroke="black" stroke-width="1"/>

</svg>

如@enxaneta所评论

  

破折号高度为笔划宽度。因此，您可以设置   笔划宽度=半径/ 5

stroke-width="4"

  

如何使虚线之间的间隙填充为白色而不是白色   透明：您用白色边框绘制另一个圆，然后   虚线下方的笔划宽度

添加第二个圆圈

 <circle class="gold" cx="25" cy="25" r="20" fill="none" stroke="gold"
         stroke-width="4" stroke-dasharray="7.85" /> 

我添加了黄色扇区，您可以添加任何其他颜色

<svg width="360" height="360" viewBox="0 0 120 120">
	 		 
	 <circle class="gold" cx="25" cy="25" r="20" fill="none" stroke="gold"
	     stroke-width="4" stroke-dasharray="7.85" /> 
		
		<circle class="black" cx="25" cy="25" r="20" fill="none" stroke="black"
  		  stroke-width="4" stroke-dasharray="7.85" stroke-dashoffset="7.85"/>

</svg>

<svg width="360" height="360" viewBox="0 0 120 120">
	 		 
	 <circle class="gold" cx="25" cy="25" r="20" fill="none" stroke="gold"
	     stroke-width="4" troke-dasharray="7.85" /> 
		
		<circle class="black" cx="25" cy="25" r="20" fill="none" stroke="black"
  		  stroke-width="4" stroke-dasharray="7.85" stroke-dashoffset="7.85"/>

</svg>