Изменить SVG ClipPath на Hover

Question

У меня есть 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.

Я смотрел видео, в котором показано, как заполнять клиппинг изображением, но я не смог понять, как заполнять клип-файлы изображением только при наведении. Я видел учебники по смене цветов, но ни один из них не менял изображения. Есть ли способ сделать это?

Может быть, есть способ нацелиться на разные пути внутри группы и заставить их реагировать на зависание по-разному? т. е. путь для фона изменяется на #fff, а путь к значку меняется на соответствующий цвет?

Или это clipPaths путь?

Буду признателен за любую помощь.

Answer 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; 
} 


----------