css - 在悬停时更改 SVG ClipPath

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。

我观看了一个视频，该视频展示了如何用图像填充 clipPaths，但我一直无法弄清楚如何仅在悬停时用图像填充 clipPaths。我看过关于改变颜色的教程，但没有关于改变图像的教程。有办法做到这一点吗？

也许有一种方法可以针对组内的不同路径并让它们以不同的方式响应悬停？即背景的路径变为#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;
}


----------