I have a SVG navigation wheel which I've put up on jsfiddle SVG navigation wheel
here is the actual SVG code:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 555.13 552.81" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>wheelv2</title>
<g id="INCUBATION_SERVICES" data-name="INCUBATION SERVICES">
<a xlink:href="http://www.google.com">
<path class="cls-1" d="M277.31,277.56V20.41A257.15,257.15,0,0,0,54.63,149Z" transform="translate(0.1 -1.38)"/>
<g id="_Group_" data-name=" Group ">
<path class="cls-2" d="M193.69,85.79a30.67,30.67,0,0,1,22.7,35.14,5.2,5.2,0,0,0-6.64,3.17h0l-.07.22a6.66,6.66,0,0,1-1-8.63,8.94,8.94,0,0,0-6.9-14.93,12,12,0,0,0-6.43-9.91,3.34,3.34,0,0,1-.64-.33A3.43,3.43,0,0,1,193.69,85.79Z" transform="translate(0.1 -1.38)"/>
<path class="cls-2" d="M211.19,124a3.42,3.42,0,0,1,4.73-1h0a30.68,30.68,0,0,1-35.14,22.69,5.2,5.2,0,0,0-3.17-6.64h0l-.22-.07a6.66,6.66,0,0,1,8.64-1A8.94,8.94,0,0,0,201,131.1a12,12,0,0,0,9.91-6.43A3.42,3.42,0,0,1,211.19,124Z" transform="translate(0.1 -1.38)"/>
<circle class="cls-2" cx="202.67" cy="107.97" r="6.76"/>
<circle class="cls-2" cx="192.47" cy="130.53" r="6.76"/>
<path class="cls-2" d="M194.77,92,195,92a6.66,6.66,0,0,1-8.64,1,8.94,8.94,0,0,0-14.93,6.9,12,12,0,0,0-9.91,6.43,3.61,3.61,0,0,1-.33.64,3.43,3.43,0,0,1-4.74,1,30.67,30.67,0,0,1,35.19-22.68A5.2,5.2,0,0,0,194.77,92Z" transform="translate(0.1 -1.38)"/>
<circle class="cls-2" cx="180.11" cy="97.77" r="6.76"/>
<path class="cls-2" d="M177.69,140.53a3.43,3.43,0,0,1,1,4.74A30.67,30.67,0,0,1,156,110.14a5.2,5.2,0,0,0,6.64-3.17h0l.07-.22a6.66,6.66,0,0,1,1,8.63,8.94,8.94,0,0,0,6.9,14.93,12,12,0,0,0,6.43,9.91A3.34,3.34,0,0,1,177.69,140.53Z" transform="translate(0.1 -1.38)"/>
<circle class="cls-2" cx="169.91" cy="120.33" r="6.76"/>
</g>
<text class="cls-3" transform="translate(65.52 123.08) rotate(-53.44)">I</text>
<text class="cls-3" transform="matrix(0.63, -0.78, 0.78, 0.63, 69, 118.24)">N</text>
<text class="cls-3" transform="translate(78.02 107.02) rotate(-48.18)">C</text>
<text class="cls-3" transform="translate(86.97 96.99) rotate(-45.22)">U</text>
<text class="cls-4" transform="matrix(0.74, -0.67, 0.67, 0.74, 96.67, 87.21)">B</text>
<text class="cls-3" transform="translate(106.35 78.36) rotate(-39.29)">A</text>
<text class="cls-3" transform="translate(116.23 70.25) rotate(-36.8)">T</text>
<text class="cls-5" transform="matrix(0.82, -0.57, 0.57, 0.82, 125.79, 63.16)">I</text>
<text class="cls-3" transform="translate(130.6 59.68) rotate(-32.48)">O</text>
<text class="cls-3" transform="translate(143.68 51.36) rotate(-29.21)">N</text>
<text class="cls-6" transform="translate(161.13 41.86) rotate(-24.78)">S</text>
<text class="cls-7" transform="translate(171.67 36.89) rotate(-22.44)">E</text>
<text class="cls-3" transform="matrix(0.94, -0.34, 0.34, 0.94, 182.9, 32.21)">R</text>
<text class="cls-3" transform="translate(194.93 27.87) rotate(-16.84)">V</text>
<text class="cls-3" transform="translate(208.13 23.94) rotate(-14.66)">I</text>
<text class="cls-3" transform="translate(213.9 22.35) rotate(-12.51)">C</text>
<text class="cls-8" transform="translate(227.02 19.45) rotate(-9.74)">E</text>
<text class="cls-3" transform="matrix(0.99, -0.12, 0.12, 0.99, 239.04, 17.39)">S</text>
</a>
</g>
<g id="CHURCH_OUTREACH" data-name="CHURCH OUTREACH">
<a xlink:href="http://www.google.com">
<path class="cls-9" d="M277.31,277.56,54.63,149a257.15,257.15,0,0,0,0,257.15Z" transform="translate(0.1 -1.38)"/>
<path id="church-building" class="cls-2" d="M109.52,277.6a1.7,1.7,0,0,0-.22-.51L89,257.26v-9.34h3.28a1.76,1.76,0,1,0,0-3.52H89V241a1.81,1.81,0,0,0-3.61,0v3.44H81.81a1.76,1.76,0,1,0,0,3.52h3.55v9.31L65,277.14a1.92,1.92,0,0,0-.22.51v28.8a.75.75,0,0,0,.75.72H80.74a.76.76,0,0,0,.75-.72V294.19a5.65,5.65,0,0,1,11.29-.48q0,.24,0,.48V306.4a.76.76,0,0,0,.75.72H108.8a.75.75,0,0,0,.75-.72Zm-22.36,2.74A5.84,5.84,0,1,1,93,274.49s0,0,0,0a5.84,5.84,0,0,1-5.84,5.83Z" transform="translate(0.1 -1.38)"/>
<text class="cls-10" transform="translate(37.35 379.72) rotate(-111.7)">C</text>
<text class="cls-11" transform="matrix(-0.32, -0.95, 0.95, -0.32, 32.34, 367.25)">H</text>
<text class="cls-12" transform="translate(27.88 354.19) rotate(-105.78)">U</text>
<text class="cls-12" transform="translate(24.13 340.95) rotate(-102.81)">R</text>
<text class="cls-12" transform="matrix(-0.17, -0.99, 0.99, -0.17, 21.2, 328.13)">C</text>
<text class="cls-13" transform="matrix(-0.12, -0.99, 0.99, -0.12, 18.88, 314.9)">H</text>
<text class="cls-12" transform="matrix(-0.04, -1, 1, -0.04, 16.72, 295.76)">O</text>
<text class="cls-14" transform="translate(16.02 280.29) rotate(-88.85)">U</text>
<text class="cls-12" transform="translate(16.22 266.46) rotate(-86.61)">T</text>
<text class="cls-12" transform="matrix(0.11, -0.99, 0.99, 0.11, 16.89, 254.72)">R</text>
<text class="cls-15" transform="translate(18.3 241.6) rotate(-81.38)">E</text>
<text class="cls-14" transform="matrix(0.2, -0.98, 0.98, 0.2, 20.13, 229.59)">A</text>
<text class="cls-16" transform="translate(22.89 216.31) rotate(-75.55)">C</text>
<text class="cls-12" transform="translate(26.27 203.33) rotate(-72.3)">H</text>
</a>
</g>
<path class="cls-17" d="M277.31,277.56,54.63,406.14A257.15,257.15,0,0,0,277.31,534.7Z" transform="translate(0.1 -1.38)"/>
<path class="cls-2" d="M175.63,431.24l.09-.35h0l2.56-2.65,4.84-4.84h0l.14-.13.6-.58-.66-.67c-1-1.06-2.79-2.83-3.25-3.18a19.88,19.88,0,0,0-26.17,29.84c.67.56,2.44,2.19,2.46,2.21l.07.07a2.82,2.82,0,0,1,.37-.8,26.25,26.25,0,0,1,3.11-3.22l.07-.07h.08l.13-.07.18-.09.14-.06.19-.07.15,0,.2-.06H162l13.08-13.33Z" transform="translate(0.1 -1.38)"/>
<path class="cls-2" d="M210.94,451.14l-20.83-20.83-5.48,5.58-1,3.54a8.21,8.21,0,0,1-4.66,5.38,7.26,7.26,0,0,1-.86.3l-.61.14a11.54,11.54,0,0,1-1.84.1c-1.12,0-2.35-.06-2.83-.09h-1l3.19-12-13,13h.1a4.43,4.43,0,0,1,3.16,1.3l.68.68.26.29,0,.07h0l.16.21.06.09h0l.14.23.06.1.12.23h0v.07c0,.12.1.24.14.35h0q0,.16.09.32v.09h0v2l.3-.06h.78a4.44,4.44,0,0,1,3.16,1.3l.68.68.21.23.06.07.14.17.06.09.12.18,0,.08.16.28h0l.08.17h0l.1.27a4,4,0,0,1,.29,1.38h0v1.27l.29-.06h.81a4.43,4.43,0,0,1,3.16,1.3l.68.68.27.29.06.07h0l.16.21.07.1h0l.13.21.07.12.11.23h0v.08a1.1,1.1,0,0,0,.12.31h0a1.61,1.61,0,0,0,.1.36v1.12h0V464a.8.8,0,0,1-.06.37v.2l.27,0h.72a4.43,4.43,0,0,1,3.15,1.3l.68.68.27.3,0,.07v.06l.14.19.06.09,0,.08.1.16.06.11v.09l.08.15,0,.12V468l.06.17v.5h0V469h0v1.73l0,.18-.07.19-.07.17-.09.19-.08.17-.08.15.85.85a3.18,3.18,0,0,0,4.47,0l.68-.68a3.18,3.18,0,0,0,0-4.48l-15-15,.92-.92,15.7,15.7a3.18,3.18,0,0,0,4.48,0l.68-.68a3.17,3.17,0,0,0,0-4.47l-15.7-15.7.92-.92,16.26,16.26a3.18,3.18,0,0,0,4.47,0l.68-.68a3.17,3.17,0,0,0,0-4.48l-15.9-16.14.9-.9.53.49,16.31,16.31a3.18,3.18,0,0,0,4.47,0l.68-.68a3.17,3.17,0,0,0,0-4.47Z" transform="translate(0.1 -1.38)"/>
<path class="cls-2" d="M167.38,462.14a3.14,3.14,0,0,1-2.24-.92l-.68-.68a3.17,3.17,0,0,1,0-4.47l1.52-1.52.26-.23a3.21,3.21,0,0,1,4.24.23l.68.68a3.12,3.12,0,0,1,.86,1.65V457a3.19,3.19,0,0,1-.66,2.42l-.23.26-1.5,1.43A3.14,3.14,0,0,1,167.38,462.14Z" transform="translate(0.1 -1.38)"/>
<path class="cls-2" d="M173.48,468.14a3.14,3.14,0,0,1-2.24-.92l-.68-.68a3.18,3.18,0,0,1,0-4.48l1.52-1.52.24-.21a3.17,3.17,0,0,1,2-.71,3.21,3.21,0,0,1,.92.14l.36.13a3.14,3.14,0,0,1,1,.65l.68.68a3.19,3.19,0,0,1,.21,4.24l-.22.24-1.52,1.52A3.14,3.14,0,0,1,173.48,468.14Z" transform="translate(0.1 -1.38)"/>
<path class="cls-2" d="M179.49,474.33a3.14,3.14,0,0,1-2.24-.92l-.68-.68a3.17,3.17,0,0,1,0-4.48l1.52-1.52a3.09,3.09,0,0,1,.32-.27,3.18,3.18,0,0,1,1.93-.65,3.13,3.13,0,0,1,2.23.92l.68.68a3.2,3.2,0,0,1,0,4.48l-1.52,1.52A3.14,3.14,0,0,1,179.49,474.33Z" transform="translate(0.1 -1.38)"/>
<path class="cls-2" d="M161.28,456a3.14,3.14,0,0,1-2.24-.92l-.68-.68a3.17,3.17,0,0,1,0-4.48l1.52-1.52a3.18,3.18,0,0,1,4.48,0l.68.68a3.17,3.17,0,0,1,.25,4.19h0a3.22,3.22,0,0,1-.24.27l-1.54,1.56A3.14,3.14,0,0,1,161.28,456Z" transform="translate(0.1 -1.38)"/>
<path class="cls-2" d="M212.78,451.33l-3.83-4-.64-.66h0l-18.2-18.2-6.7,6.7-1,3.88a6.78,6.78,0,0,1-5.11,4.87,10.49,10.49,0,0,1-1.61.08c-.73,0-1.52,0-2.12,0l3.21-12.1.12-.46,8.08-8.08h0l.59-.59h0l.67-.68c1-1.06,2.79-2.83,3.25-3.18a19.88,19.88,0,0,1,26.14,29.86C215,449.22,213.28,450.86,212.78,451.33Z" transform="translate(0.1 -1.38)"/>
<text class="cls-18" transform="matrix(-0.99, -0.14, 0.14, -0.99, 248.81, 536.08)">C</text>
<text class="cls-18" transform="translate(235.89 534.37) rotate(-169.14)">O</text>
<text class="cls-19" transform="matrix(-0.97, -0.24, 0.24, -0.97, 220.67, 531.45)">N</text>
<text class="cls-18" transform="matrix(-0.96, -0.29, 0.29, -0.96, 206.69, 527.9)">T</text>
<text class="cls-20" transform="translate(195.33 524.37) rotate(-160.84)">I</text>
<text class="cls-21" transform="translate(189.66 522.52) rotate(-158.84)">N</text>
<text class="cls-22" transform="translate(176.26 517.3) rotate(-155.75)">U</text>
<text class="cls-18" transform="matrix(-0.89, -0.46, 0.46, -0.89, 163.73, 511.64)">U</text>
<text class="cls-23" transform="translate(151.54 505.37) rotate(-149.33)">M</text>
<text class="cls-24" transform="matrix(-0.82, -0.58, 0.58, -0.82, 133.35, 494.35)">O</text>
<text class="cls-18" transform="translate(120.69 485.35) rotate(-141.75)">F</text>
<text class="cls-25" transform="matrix(-0.74, -0.67, 0.67, -0.74, 107.13, 474.48)">C</text>
<text class="cls-26" transform="matrix(-0.7, -0.71, 0.71, -0.7, 97.18, 465.49)">A</text>
<text class="cls-18" transform="translate(87.04 455.26) rotate(-131.77)">R</text>
<text class="cls-18" transform="translate(78.26 445.43) rotate(-129)">E</text>
</a>
</g>
<g id="CARE_CLINICS" data-name="CARE CLINICS">
<a xlink:href="http://www.google.com">
<path class="cls-27" d="M277.31,277.56V534.7A257.15,257.15,0,0,0,500,406.14Z" transform="translate(0.1 -1.38)"/>
<path class="cls-2" d="M347.51,457.35q2.36-7.94,4.71-15.88c.9-3,1.75-6,2.81-9a11.24,11.24,0,0,1,8.9-7.85,11.11,11.11,0,0,1,2.06-.13c5.42,0,10.84.08,16.25,0a11.06,11.06,0,0,1,11,7.56c2.58,7.92,5,15.89,7.35,23.86.88,3-.92,5.08-3.91,4.88a3.3,3.3,0,0,1-3.1-2.69q-2.07-6.68-4.13-13.37c-.87-2.83-1.7-5.66-2.55-8.5h-3.27l2.85,9.46,7.65,25.41c.09.29.14.59.21.88H355.5l-1.34-.37,10.67-35.38h-3.2c-.14.43-.26.8-.37,1.17-2.09,6.88-4.17,13.76-6.3,20.63a4.2,4.2,0,0,1-1.22,2c-2.09,1.71-4.75.88-6.23-1.84Zm26.67,12.3c7.34,0,13-5.41,13-12.29s-5.84-12.39-13.48-12.3c-6.93.08-12.62,6-12.48,12.46a12.62,12.62,0,0,0,13,12.13Z" transform="translate(0.1 -1.38)"/>
<path class="cls-2" d="M374.52,405.14a10.6,10.6,0,0,1,6,2.61,8,8,0,0,1,1.64,9.5A9.2,9.2,0,0,1,373,421.8a9,9,0,0,1-7.49-6.92,8.26,8.26,0,0,1,4.73-8.66c.93-.44,1.93-.72,2.91-1.07Z" transform="translate(0.1 -1.38)"/>
<path class="cls-2" d="M369.8,461.09c-1.07.61-2,1.13-3,1.68a1.33,1.33,0,0,1-1.86-.25l-.06-.08a1.06,1.06,0,0,1,.34-1.69c1.3-.89,2.6-1.78,4-2.56a1.7,1.7,0,0,1,2.46.7,19.79,19.79,0,0,1,1,1.87l1.82-3.39c-2.58-.3-3-2.32-3.92-4a1.09,1.09,0,0,1,.6-1.71c.43-.14,1.07.27,1.61.44a.31.31,0,0,1,.08.1c.79,2.32,2.88,2.83,5,3.4s2.66,1.66,1.7,3.63c-.64,1.3-1.36,2.56-2,3.84a3.75,3.75,0,0,1-3.78,2.1,3.71,3.71,0,0,1-3.41-2.44C370.22,462.25,370.06,461.76,369.8,461.09Z" transform="translate(0.1 -1.38)"/>
<path class="cls-2" d="M381.48,451.68a3.12,3.12,0,0,1-3.16,3,3,3,0,0,1-3-3s0-.05,0-.08a2.88,2.88,0,0,1,2.92-2.84h.08a3,3,0,0,1,3.16,2.83S381.48,451.65,381.48,451.68Z" transform="translate(0.1 -1.38)"/>
<text class="cls-28" transform="translate(494.33 422.71) rotate(126.44)">W</text>
<text class="cls-28" transform="translate(482.54 438.61) rotate(130.19)">O</text>
<text class="cls-28" transform="translate(472.59 450.43) rotate(133.6)">M</text>
<text class="cls-28" transform="translate(461.62 461.89) rotate(136.64)">E</text>
<text class="cls-28" transform="translate(452.81 470.27) rotate(139.54)">N</text>
<text class="cls-28" transform="matrix(-0.78, 0.62, -0.62, -0.78, 441.7, 479.64)">’</text>
<text class="cls-29" transform="translate(437.74 482.84) rotate(143.59)">S</text>
<text class="cls-30" transform="matrix(-0.84, 0.54, -0.54, -0.84, 423.93, 492.88)">C</text>
<text class="cls-31" transform="translate(412.64 500.12) rotate(150.61)">A</text>
<text class="cls-28" transform="translate(400.11 507.21) rotate(153.52)">R</text>
<text class="cls-28" transform="translate(388.32 513.09) rotate(156.31)">E</text>
<text class="cls-28" transform="matrix(-0.94, 0.34, -0.34, -0.94, 372.11, 520.03)">C</text>
<text class="cls-28" transform="translate(359.41 524.55) rotate(163.07)">L</text>
<text class="cls-28" transform="translate(348.56 527.81) rotate(164.98)">I</text>
<text class="cls-32" transform="translate(342.82 529.45) rotate(167.35)">N</text>
<text class="cls-28" transform="translate(328.63 532.58) rotate(169.5)">I</text>
<text class="cls-28" transform="matrix(-0.99, 0.15, -0.15, -0.99, 322.76, 533.75)">C</text>
<text class="cls-28" transform="translate(309.44 535.69) rotate(174.39)">S</text>
</a>
</g>
<g id="CONTACT_CENTER" data-name="CONTACT CENTER">
<a xlink:href="http://www.google.com">
<path class="cls-33" d="M277.31,277.56,500,406.14A257.15,257.15,0,0,0,500,149Z" transform="translate(0.1 -1.38)"/>
<path class="cls-2" d="M485.34,289.36V271.95a8.46,8.46,0,0,0-5-7.7,6.64,6.64,0,0,0,2.86-5.47,6.75,6.75,0,1,0-10.45,5.72,8.68,8.68,0,0,0-4.32,5.16,9.67,9.67,0,0,0-5.53-8.18,7.54,7.54,0,1,0-8.49.15,9.28,9.28,0,0,0-5.25,8.36v19.38h-9.43v4.29h55.62v-4.29Z" transform="translate(0.1 -1.38)"/>
<text class="cls-34" transform="matrix(0.29, 0.96, -0.96, 0.29, 525.72, 193.22)">C</text>
<text class="cls-34" transform="translate(529.56 205.69) rotate(76.19)">O</text>
<text class="cls-34" transform="translate(533.26 220.72) rotate(79.48)">N</text>
<text class="cls-34" transform="translate(535.87 234.89) rotate(82.35)">T</text>
<text class="cls-35" transform="translate(537.29 244.9) rotate(84.86)">A</text>
<text class="cls-34" transform="translate(538.53 258.43) rotate(87.69)">C</text>
<text class="cls-34" transform="matrix(-0.02, 1, -1, -0.02, 539.11, 271.81)">T</text>
<text class="cls-34" transform="translate(538.79 289.12) rotate(94.32)">C</text>
<text class="cls-34" transform="translate(537.78 302.55) rotate(97.11)">E</text>
<text class="cls-34" transform="matrix(-0.17, 0.98, -0.98, -0.17, 536.31, 314.6)">N</text>
<text class="cls-34" transform="translate(533.78 328.8) rotate(102.91)">T</text>
<text class="cls-34" transform="matrix(-0.27, 0.96, -0.96, -0.27, 531.17, 340.28)">E</text>
<text class="cls-34" transform="translate(527.93 352.01) rotate(108.35)">R</text>
</a>
</g>
<g id="MARKETING_OUTREACH" data-name="MARKETING OUTREACH">
<a xlink:href="http://www.google.com">
<path class="cls-36" d="M277.31,277.56,500,149A257.15,257.15,0,0,0,277.31,20.41Z" transform="translate(0.1 -1.38)"/>
<g id="FvauEa.tif">
<path class="cls-2" d="M346.81,136.93h3.66c0-.91.14-1.77.14-2.63V110.95c0-4.47,1.08-5.54,5.54-5.55H366l.56,5H356v26.55h11.4c1.08,0,2.19-.23,2.75,1.18.14.36,1,.57,1.57.58,2.17.07,4.34.05,6.51,0,.5,0,1.29-.1,1.44-.4.91-1.92,2.59-1.35,4.06-1.37H394c0-3.22.09-6.26,0-9.3-.07-1.63.22-2.67,2-3a17.79,17.79,0,0,0,3.3-1.42v13.66l3.27.15c1.14,4.35-.62,6.68-5,6.68-15,0-29.94-.06-44.91.06-2.93,0-4.84-.92-5.84-3.66Z" transform="translate(0.1 -1.38)"/>
<path class="cls-2" d="M371.48,120c4.14-2.32,2.56-4.65,1-7.44-2.87-5.2-1.44-11.47,3.1-15.66,5.54-5.12,15.36-5.92,21.63-1.77,4.4,2.92,7.19,7,6.89,12.27-.36,6.47-4.25,10.67-10.2,12.86a19,19,0,0,1-14-.42,6.4,6.4,0,0,0-2.85-.08c-1.64.16-3.27.46-4.91.7Zm22.92-14a4,4,0,0,0-5.52-3.67,3.42,3.42,0,0,1-2.29.08,3.82,3.82,0,0,0-4.82,1.06,3.46,3.46,0,0,0,.08,4.88c1.73,1.94,3.72,3.64,5.6,5.44,1.82-1.62,3.65-3.23,5.45-4.88a4.17,4.17,0,0,0,.93-1.25,12.74,12.74,0,0,0,.57-1.67Z" transform="translate(0.1 -1.38)"/>
</g>
<text class="cls-37" transform="translate(305.07 15.94) rotate(7.48)">M</text>
<text class="cls-38" transform="translate(320.74 18.08) rotate(11.07)">A</text>
<text class="cls-38" transform="matrix(0.97, 0.24, -0.24, 0.97, 334.86, 20.85)">R</text>
<text class="cls-38" transform="matrix(0.96, 0.29, -0.29, 0.96, 347.64, 24.04)">K</text>
<text class="cls-38" transform="matrix(0.94, 0.34, -0.34, 0.94, 360.35, 27.94)">E</text>
<text class="cls-38" transform="matrix(0.92, 0.38, -0.38, 0.92, 371.81, 32.06)">T</text>
<text class="cls-38" transform="translate(382.78 36.65) rotate(24.45)">I</text>
<text class="cls-38" transform="translate(388.26 39.04) rotate(26.71)">N</text>
<text class="cls-39" transform="translate(401.1 45.49) rotate(29.89)">G</text>
<text class="cls-38" transform="translate(418.1 55.44) rotate(34.3)">O</text>
<text class="cls-38" transform="translate(430.9 64.19) rotate(37.49)">U</text>
<text class="cls-38" transform="translate(441.85 72.6) rotate(40.28)">T</text>
<text class="cls-38" transform="translate(450.85 80.19) rotate(43)">R</text>
<text class="cls-40" transform="matrix(0.7, 0.72, -0.72, 0.7, 460.48, 89.17)">E</text>
<text class="cls-41" transform="matrix(0.66, 0.75, -0.75, 0.66, 468.99, 97.85)">A</text>
<text class="cls-38" transform="matrix(0.62, 0.78, -0.78, 0.62, 477.99, 108.04)">C</text>
<text class="cls-38" transform="matrix(0.58, 0.81, -0.81, 0.58, 486.36, 118.54)">H</text>
</a>
</g>
</svg>
What i want is to be able to hover over each section of the nav wheel and have the colors inverted, in other words the icons would be filled with the background color and the backgrounds would be filled with #fff.
I watched a video that showed how to fill clipPaths with an image, but I haven't been able to figure out how to fill the clipPaths with an image only on hover. I've seen tutorials on changing colors, but none on changing images. Is there a way to do this?
Maybe is there a way to target different paths within a group and have them respond to the hover in different ways? ie, the path for the background changes to #fff, and the path for the icon changes to its corresponding color?
Or is clipPaths the way to go?
I would appreciate any help.
