SVG рисование окружности с 4 цветами

Question

Как нарисовать окружность с 4 различными цветами? Пробовал вот так

 <svg width="200" height="200">
        <circle cx="50" cy="50" r="26"
        stroke="black"
        stroke-opacity="1"
        stroke-dasharray="40 120"
        stroke-dashoffset="40"
        style="fill: none;
        stroke-width: 15px;" />
     <circle cx="50" cy="50" r="26"
        stroke="green"
        stroke-opacity="0.5"
        stroke-dasharray="40 120"
        stroke-dashoffset=""
        style="fill: none;
        stroke-width: 15px;" /></svg>
<!-- 25%  2*Math.Pi*r*0,25 = 122.46 -->  
<!-- 75%  2*Math.Pi*r*0,75 = 367.38 --> 

Не выходит. ЧТо за ерунда?!

Answer 1

Окружность поделена на 6 частей

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="220" height="220" viewBox="-10 -10 220 220">
  &lt;g fill="none" stroke-width="15" transform="translate(100,100)"&gt;
    &lt;path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="green"/&gt;
    &lt;path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="crimson"/&gt;
    &lt;path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="yellow"/&gt;
    &lt;path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="cyan"/&gt;
    &lt;path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="red"/&gt;
    &lt;path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="blue"/&gt;
  &lt;/g&gt;
&lt;/svg&gt;</code></pre>

С градиентами 6 частей окружности

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="220" height="220" viewBox="-10 -10 220 220">
      <defs>
        <linearGradient id="redyel" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#ff0000"/>   
            <stop offset="100%" stop-color="#ffff00"/>   
        </linearGradient>
        <linearGradient id="yelgre" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#ffff00"/>   
            <stop offset="100%" stop-color="#00ff00"/>   
        </linearGradient>
        <linearGradient id="grecya" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#00ff00"/>   
            <stop offset="100%" stop-color="#00ffff"/>   
        </linearGradient>
        <linearGradient id="cyablu" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
            <stop offset="0%" stop-color="#00ffff"/>   
            <stop offset="100%" stop-color="#0000ff"/>   
        </linearGradient>
        <linearGradient id="blumag" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
            <stop offset="0%" stop-color="#0000ff"/>   
            <stop offset="100%" stop-color="#ff00ff"/>   
        </linearGradient>
        <linearGradient id="magred" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
            <stop offset="0%" stop-color="#ff00ff"/>   
            <stop offset="100%" stop-color="#ff0000"/>   
        </linearGradient>
      </defs>
  &lt;g fill="none" stroke-width="15" transform="translate(100,100)"&gt;
    &lt;path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#redyel)"/&gt;
    &lt;path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#yelgre)"/&gt;
    &lt;path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#grecya)"/&gt;
    &lt;path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cyablu)"/&gt;
    &lt;path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#blumag)"/&gt;
    &lt;path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#magred)"/&gt;
  &lt;/g&gt;
&lt;/svg&gt;</code></pre>

Answer 2

   <svg width="200" height="200">
        <circle cx="52" cy="52" r="26"
        stroke="red"
        stroke-opacity="1"
        stroke-dasharray="41 122"
        style="fill: none;
        stroke-width: 52px;" />
      <circle cx="52" cy="52" r="26"
        stroke="green"
        stroke-opacity="1"
        stroke-dasharray="41 122"
              stroke-dashoffset="41"
        style="fill: none;
        stroke-width: 52px;" />
      <circle cx="52" cy="52" r="26"
        stroke="blue"
        stroke-opacity="1"
        stroke-dasharray="41 122"
              stroke-dashoffset="82"
        style="fill: none;
        stroke-width: 52px;" />
      <circle cx="52" cy="52" r="26"
        stroke="yellow"
        stroke-opacity="1"
        stroke-dasharray="41 122"
              stroke-dashoffset="123"
        style="fill: none;
        stroke-width: 52px;" />
    </svg>