CODEWITHSUNDEEP
svg
EgyEast
EgyEast

Reputation: 1572

How to draw a circle with stripped border in SVG?

How to draw a circle with stripped border in SVG. Something like attached image ?

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>

Upvotes: 1

Views: 260

Answers (1)

Alexandr_TT
Alexandr_TT

Reputation: 14545

It is necessary to divide the circle with the use stroke-dasharray of into 8 parts

  • The circumference at a radius of 20 is 2 * 3.14 * 20 = 125.6
  • Divide into 8 parts to get 4 sectors of the circle, each of which will have a line and a space - 125.6 / 8 = 15.7

stroke-dasharray="15.7, 15.7", where the first value is the length of the dash the second value is a space 

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

Update

8 sectors

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

As commented @enxaneta

the dash height would be the stroke-width. So you may set the stroke-width = radius / 5

stroke-width="4"

How to make the gaps between dashes to be filled with white instead of being transparent: you draw another circle with a white border and the same stroke-width beneath the dashed one

Add a second circle 

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

I added yellow sectors you can add any other 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>

Upvotes: 3

Related Questions