SVG circle with divided into six traingles

Question

I'm working on SVG here I divided the svg circle into six equal triangles but the space between 6,1 triangles is not coming properly I tried to change path d value changing but still not accurate can anyone suggest me another way to fix this issue.

.fg{
        fill: #4472c4;
        stroke: #FFFFFF;
        stroke-width: 5;
        transition: fill 0.3s ;
    }

<div class="circle">
    <svg width="800" height="800" class="tp-cir" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision">
        <a xlink:href="#"><path class="fg tpc"  d="M100,100 v-100 a100,100 1 0,1 84.6025,50" />
            <text x="135" y="35" text-anchor="middle">1
        </a>
        <a xlink:href="#"><path class="fg tpc"  d="M100,100 l86,-50 a100,100 1 0,1 0,100" />
            <text x="170" y="98" text-anchor="middle">2
            </text>
        </a>
        <a xlink:href="#"><path class="fg tpc"  d="M100,100 l86,50 a100,100 1 0,1 -86,50" />
            <text x="135" y="160" text-anchor="middle">3  
            </text>
        </a>
        <a xlink:href="#"><path class="fg tpc"  d="M100,100 v100 a100,100 1 0,1 -86,-50" />
            <text x="60" y="155" text-anchor="middle">4
            </text>
        </a>
        <a xlink:href="#"><path class="fg tpc"  d="M100,100 l-86,50 a100,100 1 0,1 0,-100" />
            <text x="27.5" y="100" text-anchor="middle">5
            </text>
        </a>
        <a xlink:href="#"><path class="fg tpc" d="M100,100 l -87,-50 a100,100 1 0,1 84, -50" />
            <text x="60" y="35" text-anchor="middle">6
            </text>
        </a>
    </svg>
</div>

I've answered this question here. https://stackoverflow.com/questions/56036195/create-svg-circle-using-path-with-6-segments/56039943#56039943 If you don't need the inner whole please make r = 0; (r = the inner radius) — enxaneta, Jul 02 '19 at 07:22
@enxaneta In my code how can I fix can you post a snippet of you're code. — Husna, Jul 02 '19 at 07:36

enxaneta · Accepted Answer · 2019-07-02T08:08:41.123

This is how I would do it.

I'm drawing the triangle only once and rotate it the required amount

For the gaps between triangles I'm using a mask;

I'm grouping the text and the triangle in the same <a> element.

Please take a look:

svg{border:1px solid; }
text{fill:white;text-anchor:middle;dominant-baseline:middle;pointer-events:none;}
a use{fill:blue}
a use:hover{fill:red}

<svg viewBox="-50 -50 100 100" width="300">
<defs>
<path id="sectorpath" d="M0,0 L38.97114317029974,-22.499999999999996 A45,45 0 0 1 38.97114317029974,22.499999999999996 L0,0 A0,0 0 0 0 0,0"></path>
<mask id="themask">
<use xlink:href="#sectorpath" style="stroke:#000; stroke-width:3; fill: #ffffff"></use>
</mask>
<use xlink:href="#sectorpath" id="sector" style="mask: url(#themask)"></use>
</defs>
<a xlink:href="#"><g>
  <use xlink:href="#sector" transform="rotate(-90)" ></use>
  <text x="0" y="-22.5">a</text>
</g>  
</a>
  
<a xlink:href="#"><g>
<use xlink:href="#sector" transform="rotate(-30)"></use>
<text x="19.48557158514987" y="-11.25">b</text>
</g>
</a>
  
  
  
<a xlink:href="#">
  <g>
  <use xlink:href="#sector" transform="rotate(30)"></use>
  <text x="19.48557158514987" y="11.249999999999996">c</text>
  </g>
</a>
  
  <a xlink:href="#">
  <use xlink:href="#sector" transform="rotate(90)"></use>
  <text x="1.3777276490407724e-15" y="22.5">d</text>
 
</a>


<a xlink:href="#">
  <use xlink:href="#sector" transform="rotate(150)"></use>
  <text x="-19.485571585149867" y="11.250000000000007">e</text>
</a>


<a xlink:href="#">
  <use xlink:href="#sector" transform="rotate(210)"></use>
  <text x="-19.485571585149877" y="-11.249999999999986">f</text>
</a>
  
  

</svg>

Can we add image inside `` instead of tag title a,b,c,d i want to add an image. Is it possible? — Husna, Jul 02 '19 at 10:58
I would need to know more details: Like: would the image cover all the triangle or it's just an icon? Would the image be rotated? All this can be a different question. You can ask it for only one _a, use, text / image_ group — enxaneta, Jul 02 '19 at 11:37
Thanks. actually, I have a large title for breaking title another i have to write. This title I'm passing dynamically that's the reason I make img for the title and want to use the image in title place. — Husna, Jul 02 '19 at 12:12

SVG circle with divided into six traingles

1 Answers1