我有一个SVG导航轮，我已经把它放在jsfiddle上SVG navigation wheel
这是实际的SVG代码：
<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>
我想要的是能够将鼠标悬停在导航轮的每个部分上并使颜色反转，换句话说，图标将填充背景颜色，背景将填充#fff。
我观看了一段视频，展示了如何使用图片填充clipPaths，但我还没有能够弄清楚如何仅在悬停时用图像填充clipPaths。 我看过有关改变颜色的教程，但没有看到改变图像的教程。有没有办法做到这一点？
也许是否有办法定位群组中的不同路径并让他们以不同的方式响应悬停？即，背景的路径更改为#fff，图标的路径更改为其对应的颜色？
或者是clipPaths的方法吗？
我将不胜感激。
答案 0 :(得分：1)
我尝试了第一部分以及代码的外观。
#_Group_ *:hover ~ .cls-1,
.cls-1:hover { //section that you hover
fill: #333333;
}
.cls-1:hover ~ #_Group_ path,
.cls-1:hover ~ #_Group_ circle { //inner section to over ride
fill: #cccccc;
}
----------