Cómo dibujar un círculo con borde rayado en SVG. ¿Algo como una imagen adjunta?

enter image description here

<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>
svg
1
EgyEast 25 oct. 2019 a las 09:46

1 respuesta

La mejor respuesta

Es necesario dividir el círculo con el uso stroke-dasharray de en 8 partes

  • La circunferencia en un radio de 20 es 2 * 3.14 * 20 = 125.6
  • Divida en 8 partes para obtener 4 sectores del círculo, cada uno de los cuales tendrá una línea y un espacio - 125.6 / 8 = 15.7

stroke-dasharray="15.7, 15.7", donde el primer valor es la longitud del guión, el segundo valor es un espacio

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

Actualizar

8 sectores

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

Como comentó @enxaneta

la altura del guión sería el ancho del trazo. Entonces puede establecer el trazo-ancho = radio / 5

stroke-width="4"

Cómo hacer que los espacios entre los guiones se llenen de blanco en lugar de ser transparentes: dibuja otro círculo con un borde blanco y el mismo ancho de trazo debajo del punteado

Agregar un segundo círculo

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

Agregué sectores amarillos, puedes agregar cualquier otro color

<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>
3
Alexandr_TT 25 oct. 2019 a las 08:50