2

I have 3 svg donut charts, each chart has a line created with stroke-dasharray altogether the charts add up to 100%.

I'd like each chart to start where the last one finishes so the first chart is from 0-60%. I'd like the second chart to start at 60% and go to 90% and the final chart to start at 90% to 100%

I'm trying to so this with stroke dashoffset but I can't work out how this works.

<svg width="15%" height="15%" viewBox="0 0 42 42" class="donut">
  <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
  <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>

  <circle class="donut-segment" 
          cx="21" 
          cy="21" 
          r="15.91549430918954" 
          fill="transparent" 
          stroke="green" 
          stroke-width="3" 
          stroke-dasharray="60 40" 
          stroke-dashoffset="25"></circle>
</svg>






<svg width="15%" height="15%" viewBox="0 0 42 42" class="donut">
  <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
  <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>

  <circle class="donut" 
          cx="21" 
          cy="21" 
          r="15.91549430918954" 
          fill="transparent" 
          stroke="red" 
          stroke-width="3" 
          stroke-dasharray="30 70" 
          stroke-dashoffset="60"></circle>
</svg>







<svg width="15%" height="15%" viewBox="0 0 42 42" class="donut">
  <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
  <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>

  <circle class="donut" 
          cx="21" 
          cy="21" 
          r="15.91549430918954" 
          fill="transparent" 
          stroke="grey" 
          stroke-width="3" 
          stroke-dasharray="10 90" 
          stroke-dashoffset="-"></circle>
</svg>

Improve this question
1
  • Found the answer = Circumference − All preceding segments’ total length + First segment’s offset = Current segment offset
    – ttmt
    Commented Oct 8, 2018 at 11:49

2 Answers 2

Reset to default
4

The circumference with a radius r ="15.91 is equal to 2 * 3.1415 * 15.91 = 99.96 ∼ 100

stroke-dasharray="60 40", where

60 - dash
40 - gap

A positive value stroke-dashoffset = 25 shifts the line counterclockwise by a quarter of a circle.
Since the default - stroke-dashoffset = 0 circle will start at 90 degrees, that is from the x axis of the first quadrant 

<svg width="50%" height="50%" viewBox="0 0 42 42" class="donut">
  <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
  <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<!--  first chart is from 0-60% -->
  <circle class="donut-segment" 
          cx="21" 
          cy="21" 
          r="15.91549430918954" 
          fill="transparent" 
          stroke="green" 
          stroke-width="3" 
          stroke-dasharray="60 40" 
          stroke-dashoffset="25">
  </circle>

  • A negative value stroke-dashoffset = -35 shifts the second, red circle clockwise to the end of the first green line(25-60 = -35) 

<svg width="50%" height="50%" viewBox="0 0 42 42" class="donut">
  <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
  <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<!--  first chart is from 0-60% -->
  <circle class="donut-segment" 
          cx="21" 
          cy="21" 
          r="15.91549430918954" 
          fill="transparent" 
          stroke="green" 
          stroke-width="3" 
          stroke-dasharray="60 40" 
          stroke-dashoffset="25"></circle>
  <!--  second chart to start at 60% and go to 90% -->	
	<circle class="donut-segment" 
          cx="21" 
          cy="21" 
          r="15.91549430918954" 
          fill="transparent" 
          stroke="red" 
          stroke-width="3" 
          stroke-dasharray="30 70" 
          stroke-dashoffset="-35"></circle>	
   </svg>

  • A negative value stroke-dashoffset = -65 shifts the third, orange circle clockwise to the end of the second red line(-35-30 = -65) 

<svg width="50%" height="50%" viewBox="0 0 42 42" class="donut">
  <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
  <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<!--  first chart is from 0-60% -->
  <circle class="donut-segment" 
          cx="21" 
          cy="21" 
          r="15.91549430918954" 
          fill="transparent" 
          stroke="green" 
          stroke-width="3" 
          stroke-dasharray="60 40" 
          stroke-dashoffset="25"></circle>
  <!--  second chart to start at 60% and go to 90% -->	
	<circle class="donut-segment" 
          cx="21" 
          cy="21" 
          r="15.91549430918954" 
          fill="transparent" 
          stroke="red" 
          stroke-width="3" 
          stroke-dasharray="30 70" 
          stroke-dashoffset="-35"></circle>	
	<!--  final chart to start at 90% to 100%  -->
	<circle class="donut-segment" 
          cx="21" 
          cy="21" 
          r="15.91549430918954" 
          fill="transparent" 
          stroke="orange" 
          stroke-width="3" 
          stroke-dasharray="10 90" 
          stroke-dashoffset="-65"></circle>		  
		  
		  
</svg>

Improve this answer
0
2

1st chart is from 0-60% => 60% offset 0%:

stroke-dasharray="60 40"
stroke-dashoffset="0"

2nd chart to start at 60% and go to 90% => 30% offset 60%:

 stroke-dasharray="30 70"
 stroke-dashoffset="-60"

final chart to start at 90% to 100% => 10% offset 90%:

 stroke-dasharray="10 90"
 stroke-dashoffset="-90"


  <svg width="15%" height="15%" viewBox="0 0 42 42" class="donut">
    <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
    <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
    <!--  first chart is from 0-60%  => 60% offset 0% -->
    <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="green" stroke-width="3"
      stroke-dasharray="60 40"
      stroke-dashoffset="0"
    ></circle>
  </svg>
  <svg width="15%" height="15%" viewBox="0 0 42 42" class="donut">
    <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
    <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
    <!--  second chart to start at 60% and go to 90% => 30% offset 60% -->
    <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="red" stroke-width="3"
      stroke-dasharray="30 70"
      stroke-dashoffset="-60"
    ></circle>
  </svg>

  <svg width="15%" height="15%" viewBox="0 0 42 42" class="donut">
    <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
    <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
    <!--  final chart to start at 90% to 100% => 10% offset 90% -->
    <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="grey" stroke-width="3"
      stroke-dasharray="10 90"
      stroke-dashoffset="-90"
    ></circle>
  </svg>


  <svg width="15%" height="15%" viewBox="0 0 42 42" class="donut">
    <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
    <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
    <!--  all charts -->
    <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="green" stroke-width="3"
      stroke-dasharray="60 40"
      stroke-dashoffset="0"
    ></circle>
    <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="red" stroke-width="3"
      stroke-dasharray="30 70"
      stroke-dashoffset="-60"
    ></circle>
    <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="grey" stroke-width="3"
      stroke-dasharray="10 90"
      stroke-dashoffset="-90"
    ></circle>
  </svg>

Improve this answer
1
  • Can you provide a bit of explanation to help the OP understand what you've done?
    – phalteman
    Commented Jul 20, 2019 at 0:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.