Home > Software engineering >  How to select inside of SVG path?
How to select inside of SVG path?

Time:01-14

How can I change the inside color of the circle? Or how can I do animation while my cursor goes inside of the SVG circle?

I tried to use fill, fill-rule, and fill-opacity but it is not working. I want them to do animation when I hover inside of the circle

enter image description here

Here's the code: https://codesandbox.io/s/framer-motion-svg-uh3sbv?file=/src/components/MainSVG.js

This is the path i want to select inside:

<motion.g id="circles" whileHover={{ scale: 6.5, rotate: 360 }} fill={"red"}>
            <motion.g id="circle6" fill={"red"} fillRule={"green"}>
            <motion.path className="cls-3" d="M124,546.69h-.29v-1H124c.57,0,1.13,0,1.69,0l.06,1C125.18,546.68,124.6,546.69,124,546.69Zm-2.32-.09c-.67-.05-1.35-.12-2-.22l.15-1c.64.09,1.3.17,2,.22Zm6.09-.14-.13-1c.64-.08,1.29-.18,1.94-.31l.2,1C129.12,546.26,128.44,546.37,127.78,546.46ZM117.67,546c-.66-.14-1.32-.31-2-.5l.28-1c.63.18,1.27.35,1.9.49Zm14.1-.34-.27-1c.64-.17,1.27-.36,1.88-.58l.33,1C133.08,545.29,132.42,545.49,131.77,545.67Zm-18-.8c-.63-.23-1.27-.49-1.89-.77l.42-.91c.59.27,1.2.52,1.82.75Zm21.83-.53-.39-.92c.6-.26,1.2-.54,1.78-.83l.45.89C136.84,543.78,136.22,544.07,135.6,544.34Zm-25.54-1.14c-.6-.31-1.19-.66-1.76-1l.53-.84c.55.34,1.12.67,1.7,1Zm29.16-.71-.51-.86c.56-.33,1.11-.69,1.64-1.06l.58.82C140.38,541.77,139.8,542.14,139.22,542.49ZM106.61,541c-.54-.39-1.08-.81-1.6-1.25l.64-.77c.51.43,1,.83,1.55,1.21Zm35.94-.87-.62-.78c.5-.41,1-.85,1.48-1.29l.68.74C143.6,539.29,143.08,539.74,142.55,540.17Zm-39.05-1.74c-.48-.46-1-.95-1.42-1.46l.74-.67c.44.49.9,1,1.37,1.41Zm42-1-.73-.69c.45-.48.89-1,1.3-1.47l.77.63C146.45,536.4,146,536.91,145.54,537.41Zm-44.77-2c-.42-.53-.82-1.08-1.21-1.64l.83-.56c.37.54.76,1.07,1.16,1.58Zm47.35-1.15-.82-.58c.38-.54.75-1.09,1.09-1.64l.85.52C148.89,533.14,148.51,533.71,148.12,534.27Zm-49.64-2.2c-.34-.58-.67-1.19-1-1.79l.89-.45c.29.59.61,1.17.94,1.73Zm51.77-1.27-.89-.46c.3-.58.59-1.18.85-1.78l.92.41C150.86,529.58,150.56,530.2,150.25,530.8Zm-53.58-2.37c-.26-.62-.5-1.26-.72-1.9l1-.32c.21.62.44,1.24.69,1.84Zm55.21-1.36-.94-.33c.22-.62.42-1.25.6-1.88l1,.28C152.32,525.78,152.11,526.43,151.88,527.07Zm-56.51-2.49c-.17-.65-.32-1.32-.44-2l1-.18c.12.64.27,1.29.43,1.92ZM153,523.16l-1-.2c.13-.64.25-1.29.33-1.94l1,.14C153.23,521.83,153.12,522.5,153,523.16Zm-58.36-2.58c-.08-.67-.13-1.35-.16-2l1,0c0,.65.09,1.31.17,2Zm58.91-1.44-1-.07c.05-.65.07-1.31.07-2h1C153.6,517.78,153.58,518.46,153.53,519.14Zm-58.1-2.6-1,0c0-.67,0-1.35.1-2l1,.09C95.47,515.23,95.44,515.89,95.43,516.54Zm57.16-.28c0-.65-.06-1.31-.12-2l1-.1c.07.67.11,1.36.13,2Zm-56.82-3.63-1-.15c.1-.67.23-1.34.38-2l1,.22C96,511.34,95.87,512,95.77,512.63Zm56.44-.28c-.11-.64-.24-1.29-.39-1.92l1-.23c.16.65.29,1.32.41,2ZM96.64,508.8l-1-.29c.19-.64.41-1.29.65-1.92l.94.35C97,507.55,96.83,508.18,96.64,508.8Zm54.66-.27c-.2-.62-.42-1.24-.66-1.85l.93-.36c.25.63.48,1.27.68,1.92ZM98,505.13l-.91-.42c.29-.61.59-1.22.92-1.82l.88.48C98.61,504,98.31,504.54,98,505.13Zm51.82-.25c-.27-.59-.58-1.18-.9-1.74l.88-.49c.33.58.64,1.19.93,1.8Zm-49.93-3.2-.84-.54c.37-.57.76-1.13,1.16-1.67l.8.6C100.66,500.59,100.29,501.13,99.93,501.68Zm48-.22c-.35-.55-.73-1.09-1.13-1.61l.8-.6c.41.54.8,1.1,1.17,1.66Zm-45.67-2.93-.76-.65q.66-.76,1.38-1.5l.71.7C103.14,497.55,102.69,498,102.27,498.53Zm43.3-.2c-.42-.49-.87-1-1.34-1.44l.71-.7c.48.48.95,1,1.39,1.48ZM105,495.73l-.66-.75c.51-.45,1-.89,1.57-1.3l.61.79C106,494.87,105.52,495.29,105,495.73Zm37.78-.18c-.49-.43-1-.84-1.53-1.24l.61-.8c.54.41,1.07.85,1.58,1.29Zm-34.67-2.23-.56-.83c.57-.38,1.15-.74,1.73-1.07l.5.87C109.24,492.61,108.68,493,108.13,493.32Zm31.54-.14c-.55-.36-1.11-.7-1.68-1l.49-.87c.59.33,1.17.69,1.74,1.06Zm-28.14-1.81-.43-.9c.61-.3,1.23-.57,1.85-.82l.38.92C112.73,490.82,112.12,491.08,111.53,491.37Zm24.71-.12c-.58-.28-1.19-.54-1.8-.78l.36-.93c.63.25,1.26.52,1.87.81Zm-21.07-1.35-.31-.95c.64-.2,1.3-.39,2-.56l.24,1C116.43,489.52,115.79,489.7,115.17,489.9Zm17.41-.08c-.63-.2-1.26-.37-1.89-.52l.23-1c.65.16,1.31.34,2,.54ZM119,489l-.17-1c.66-.12,1.34-.22,2-.29l.11,1C120.28,488.75,119.62,488.84,119,489Zm9.78-.05c-.65-.1-1.31-.19-1.95-.25l.1-1c.66.07,1.34.16,2,.27Zm-5.87-.37,0-1c.67,0,1.36,0,2,0l0,1C124.2,488.5,123.54,488.51,122.89,488.53Z" transform="translate(-79.36 -47.97)"/>
            </motion.g>
            <motion.g id="circle5">
            <motion.path className="cls-3" d="M124,465h-.29v-1H124c.57,0,1.13,0,1.69-.05l.06,1C125.18,465,124.6,465,124,465Zm-2.32-.09c-.67-.06-1.35-.13-2-.23l.15-1c.64.1,1.3.17,2,.22Zm6.09-.15-.13-1c.64-.08,1.29-.19,1.94-.32l.2,1C129.12,464.58,128.44,464.69,127.78,464.77Zm-10.11-.44c-.66-.15-1.32-.32-2-.51l.28-1c.63.19,1.27.35,1.9.49Zm14.1-.35-.27-1c.64-.17,1.27-.36,1.88-.57l.33.94C133.08,463.6,132.42,463.8,131.77,464Zm-18-.79c-.63-.24-1.27-.5-1.89-.78l.42-.91c.59.27,1.2.52,1.82.75Zm21.83-.54-.39-.92c.6-.26,1.2-.54,1.78-.83l.45.89C136.84,462.1,136.22,462.39,135.6,462.65Zm-25.54-1.13c-.6-.32-1.19-.67-1.76-1l.53-.85c.55.34,1.12.68,1.7,1Zm29.16-.72-.51-.85c.56-.34,1.11-.7,1.64-1.07l.58.82C140.38,460.08,139.8,460.45,139.22,460.8Zm-32.61-1.44c-.54-.4-1.08-.82-1.6-1.26l.64-.76c.51.42,1,.83,1.55,1.21Zm35.94-.88-.62-.78c.5-.41,1-.84,1.48-1.28l.68.73C143.6,457.61,143.08,458.05,142.55,458.48Zm-39.05-1.74c-.48-.46-1-.95-1.42-1.46l.74-.67c.44.49.9,1,1.37,1.41Zm42-1-.73-.69c.45-.47.89-1,1.3-1.47l.77.63C146.45,454.71,146,455.23,145.54,455.72Zm-44.77-2c-.42-.53-.82-1.08-1.21-1.63l.83-.57c.37.54.76,1.07,1.16,1.58Zm47.35-1.15-.82-.58c.38-.54.75-1.09,1.09-1.64l.85.52C148.89,451.46,148.51,452,148.12,452.58Zm-49.64-2.2c-.34-.58-.67-1.18-1-1.79l.89-.44c.29.58.61,1.16.94,1.72Zm51.77-1.27-.89-.46c.3-.58.59-1.18.85-1.77l.92.4C150.86,447.89,150.56,448.51,150.25,449.11Zm-53.58-2.37c-.26-.62-.5-1.26-.72-1.9l1-.32c.21.62.44,1.24.69,1.84Zm55.21-1.35-.94-.34c.22-.62.42-1.25.6-1.87l1,.27C152.32,444.09,152.11,444.75,151.88,445.39Zm-56.51-2.5c-.17-.65-.32-1.32-.44-2l1-.19c.12.64.27,1.29.43,1.92ZM153,441.47l-1-.2c.13-.64.25-1.29.33-1.94l1,.14C153.23,440.14,153.12,440.82,153,441.47ZM94.62,438.9c-.08-.68-.13-1.36-.16-2l1-.05c0,.65.09,1.31.17,2Zm58.91-1.45-1-.07c.05-.65.07-1.31.07-2h1C153.6,436.09,153.58,436.78,153.53,437.45Zm-58.1-2.59-1,0c0-.68,0-1.36.1-2l1,.08C95.47,433.54,95.44,434.2,95.43,434.86Zm57.16-.29c0-.65-.06-1.31-.12-2l1-.09c.07.67.11,1.35.13,2Zm-56.82-3.63-1-.15c.1-.67.23-1.34.38-2l1,.23C96,429.65,95.87,430.3,95.77,430.94Zm56.44-.27c-.11-.65-.24-1.3-.39-1.93l1-.23c.16.65.29,1.33.41,2Zm-55.57-3.55-1-.29c.19-.65.41-1.3.65-1.93l.94.35C97,425.87,96.83,426.49,96.64,427.12Zm54.66-.27c-.2-.62-.42-1.25-.66-1.86l.93-.36c.25.63.48,1.27.68,1.92ZM98,423.44l-.91-.42c.29-.61.59-1.22.92-1.82l.88.49C98.61,422.26,98.31,422.85,98,423.44Zm51.82-.25c-.27-.59-.58-1.17-.9-1.74l.88-.49c.33.59.64,1.19.93,1.81ZM99.93,420l-.84-.55c.37-.57.76-1.13,1.16-1.67l.8.6C100.66,418.9,100.29,419.44,99.93,420Zm48-.23c-.35-.54-.73-1.08-1.13-1.6l.8-.61c.41.54.8,1.1,1.17,1.66Zm-45.67-2.93-.76-.65c.44-.5.9-1,1.38-1.5l.71.7C103.14,415.86,102.69,416.35,102.27,416.84Zm43.3-.2c-.42-.49-.87-1-1.34-1.43l.71-.71c.48.48.95,1,1.39,1.49ZM105,414l-.66-.75c.51-.45,1-.89,1.57-1.3l.61.79C106,413.18,105.52,413.6,105,414Zm37.78-.18c-.49-.42-1-.84-1.53-1.24l.61-.79c.54.41,1.07.84,1.58,1.28Zm-34.67-2.22-.56-.83c.57-.38,1.15-.74,1.73-1.07l.5.86C109.24,410.92,108.68,411.27,108.13,411.64Zm31.54-.15q-.82-.54-1.68-1l.49-.87q.89.5,1.74,1Zm-28.14-1.81-.43-.9c.61-.29,1.23-.57,1.85-.82l.38.93C112.73,409.13,112.12,409.4,111.53,409.68Zm24.71-.11c-.58-.28-1.19-.55-1.8-.79l.36-.93c.63.25,1.26.52,1.87.81Zm-21.07-1.35-.31-1c.64-.21,1.3-.4,2-.57l.24,1C116.43,407.83,115.79,408,115.17,408.22Zm17.41-.09c-.63-.2-1.26-.37-1.89-.52l.23-1c.65.15,1.31.33,2,.54Zm-13.6-.86-.17-1c.66-.12,1.34-.21,2-.28l.11,1C120.28,407.06,119.62,407.15,119,407.27Zm9.78,0c-.65-.11-1.31-.2-1.95-.26l.1-1c.66.07,1.34.16,2,.27Zm-5.87-.37,0-1c.67,0,1.36,0,2,0l0,1C124.2,406.82,123.54,406.82,122.89,406.85Z" transform="translate(-79.36 -47.97)"/>
            </motion.g>
            <motion.g id="circle4">
            <motion.path className="cls-3" d="M124,383.32h-.29v-1H124c.57,0,1.13,0,1.69-.05l.06,1C125.18,383.3,124.6,383.32,124,383.32Zm-2.32-.09c-.67-.05-1.35-.13-2-.23l.15-1c.64.1,1.3.17,2,.22Zm6.09-.15-.13-1c.64-.08,1.29-.19,1.94-.31l.2,1C129.12,382.89,128.44,383,127.78,383.08Zm-10.11-.44c-.66-.15-1.32-.31-2-.5l.28-1c.63.18,1.27.34,1.9.48Zm14.1-.35-.27-1c.64-.18,1.27-.37,1.88-.58l.33.94C133.08,381.91,132.42,382.11,131.77,382.29Zm-18-.79c-.63-.23-1.27-.49-1.89-.77l.42-.91c.59.26,1.2.51,1.82.74ZM135.6,381l-.39-.92c.6-.25,1.2-.53,1.78-.83l.45.89C136.84,380.41,136.22,380.7,135.6,381Zm-25.54-1.13c-.6-.32-1.19-.66-1.76-1l.53-.85c.55.35,1.12.68,1.7,1Zm29.16-.71-.51-.86c.56-.34,1.11-.7,1.64-1.07l.58.82C140.38,378.4,139.8,378.77,139.22,379.12Zm-32.61-1.45c-.54-.4-1.08-.82-1.6-1.25l.64-.77c.51.42,1,.83,1.55,1.21Zm35.94-.88-.62-.78c.5-.41,1-.84,1.48-1.28l.68.73C143.6,375.92,143.08,376.37,142.55,376.79Zm-39.05-1.73c-.48-.47-1-1-1.42-1.46l.74-.67c.44.48.9,1,1.37,1.4Zm42-1-.73-.69c.45-.47.89-1,1.3-1.47l.77.64C146.45,373,146,373.54,145.54,374Zm-44.77-2c-.42-.52-.82-1.08-1.21-1.63l.83-.57c.37.54.76,1.07,1.16,1.59Zm47.35-1.15-.82-.58c.38-.53.75-1.08,1.09-1.64l.85.52C148.89,369.77,148.51,370.34,148.12,370.89Zm-49.64-2.2c-.34-.58-.67-1.18-1-1.79l.89-.44c.29.58.61,1.16.94,1.72Zm51.77-1.27-.89-.46c.3-.58.59-1.18.85-1.77l.92.4C150.86,366.21,150.56,366.82,150.25,367.42Zm-53.58-2.36c-.26-.62-.5-1.27-.72-1.91l1-.32c.21.62.44,1.24.69,1.84Zm55.21-1.36-.94-.34c.22-.62.42-1.25.6-1.87l1,.27C152.32,362.41,152.11,363.06,151.88,363.7Zm-56.51-2.5c-.17-.65-.32-1.32-.44-2l1-.19c.12.65.27,1.29.43,1.92ZM153,359.79l-1-.21c.13-.63.25-1.28.33-1.93l1,.13C153.23,358.45,153.12,359.13,153,359.79Zm-58.36-2.58c-.08-.67-.13-1.35-.16-2l1,0c0,.64.09,1.3.17,1.95Zm58.91-1.45-1-.07c.05-.65.07-1.31.07-2h1C153.6,354.4,153.58,355.09,153.53,355.76Zm-58.1-2.59-1,0c0-.68,0-1.36.1-2l1,.09C95.47,351.86,95.44,352.52,95.43,353.17Zm57.16-.28c0-.66-.06-1.32-.12-2l1-.1c.07.67.11,1.35.13,2Zm-56.82-3.63-1-.16c.1-.66.23-1.33.38-2l1,.22C96,348,95.87,348.61,95.77,349.26Zm56.44-.28c-.11-.64-.24-1.29-.39-1.93l1-.23c.16.66.29,1.33.41,2Zm-55.57-3.55-1-.29c.19-.65.41-1.29.65-1.93l.94.36C97,344.18,96.83,344.81,96.64,345.43Zm54.66-.27c-.2-.62-.42-1.25-.66-1.85l.93-.37c.25.63.48,1.28.68,1.92ZM98,341.75l-.91-.42c.29-.61.59-1.22.92-1.81l.88.48C98.61,340.57,98.31,341.16,98,341.75Zm51.82-.24c-.27-.6-.58-1.18-.9-1.75l.88-.49c.33.59.64,1.2.93,1.81Zm-49.93-3.2-.84-.54c.37-.57.76-1.14,1.16-1.68l.8.6C100.66,337.21,100.29,337.76,99.93,338.31Zm48-.23c-.35-.54-.73-1.08-1.13-1.6l.8-.61c.41.54.8,1.1,1.17,1.67Zm-45.67-2.93-.76-.65c.44-.5.9-1,1.38-1.49l.71.69C103.14,334.18,102.69,334.67,102.27,335.15Zm43.3-.2c-.42-.49-.87-1-1.34-1.43l.71-.71c.48.48.95,1,1.39,1.49ZM105,332.35l-.66-.75c.51-.45,1-.89,1.57-1.29l.61.79C106,331.49,105.52,331.91,105,332.35Zm37.78-.17c-.49-.43-1-.85-1.53-1.24l.61-.8c.54.41,1.07.84,1.58,1.28ZM108.13,330l-.56-.83c.57-.38,1.15-.74,1.73-1.07l.5.86C109.24,329.24,108.68,329.58,108.13,330Zm31.54-.15q-.82-.54-1.68-1l.49-.87c.59.33,1.17.69,1.74,1.06ZM111.53,328l-.43-.9c.61-.3,1.23-.58,1.85-.83l.38.93C112.73,327.44,112.12,327.71,111.53,328Zm24.71-.12c-.58-.28-1.19-.54-1.8-.78l.36-.93c.63.24,1.26.52,1.87.8Zm-21.07-1.35-.31-.95c.64-.21,1.3-.4,2-.56l.24,1C116.43,326.15,115.79,326.33,115.17,326.53Zm17.41-.09c-.63-.19-1.26-.37-1.89-.52l.23-1c.65.15,1.31.33,2,.54Zm-13.6-.86-.17-1c.66-.11,1.34-.21,2-.28l.11,1C120.28,325.37,119.62,325.46,119,325.58Zm9.78-.05c-.65-.11-1.31-.2-1.95-.26l.1-1c.66.06,1.34.15,2,.26Zm-5.87-.37,0-1c.67,0,1.36,0,2,0l0,1C124.2,325.13,123.54,325.13,122.89,325.16Z" transform="translate(-79.36 -47.97)"/>
            </motion.g>
            <motion.g id="circle3">
            <motion.path className="cls-3" d="M124,301.63h-.29v-1H124c.57,0,1.13,0,1.69-.05l.06,1C125.18,301.61,124.6,301.63,124,301.63Zm-2.32-.09c-.67-.05-1.35-.13-2-.22l.15-1c.64.09,1.3.16,2,.22Zm6.09-.15-.13-1c.64-.08,1.29-.18,1.94-.31l.2,1C129.12,301.2,128.44,301.31,127.78,301.39ZM117.67,301c-.66-.14-1.32-.31-2-.5l.28-1c.63.18,1.27.35,1.9.48Zm14.1-.35-.27-1c.64-.17,1.27-.37,1.88-.58l.33.95C133.08,300.23,132.42,300.43,131.77,300.6Zm-18-.79c-.63-.23-1.27-.49-1.89-.77l.42-.91c.59.27,1.2.52,1.82.74Zm21.83-.54-.39-.92c.6-.25,1.2-.53,1.78-.83l.45.89C136.84,298.72,136.22,299,135.6,299.27Zm-25.54-1.13c-.6-.32-1.19-.66-1.76-1l.53-.85c.55.35,1.12.68,1.7,1Zm29.16-.71-.51-.86c.56-.34,1.11-.7,1.64-1.07l.58.82C140.38,296.71,139.8,297.08,139.22,297.43ZM106.61,296c-.54-.4-1.08-.82-1.6-1.25l.64-.77c.5.42,1,.83,1.55,1.21Zm35.94-.88-.62-.78c.5-.41,1-.84,1.48-1.28l.68.73C143.6,294.23,143.08,294.68,142.55,295.1Zm-39.05-1.73c-.49-.47-1-1-1.42-1.46l.74-.67c.44.48.9,1,1.37,1.41Zm42-1-.73-.68c.45-.48.88-1,1.3-1.48l.77.64C146.45,291.34,146,291.85,145.54,292.34Zm-44.77-2c-.42-.53-.83-1.08-1.21-1.64l.83-.56c.37.53.76,1.07,1.16,1.58Zm47.35-1.16-.82-.58c.38-.53.75-1.08,1.09-1.63l.85.52C148.89,288.08,148.51,288.65,148.12,289.2ZM98.48,287c-.35-.58-.67-1.18-1-1.78l.89-.45c.29.59.61,1.17.94,1.73Zm51.77-1.26-.89-.47c.3-.58.59-1.17.85-1.77l.92.4C150.86,284.52,150.56,285.14,150.25,285.74Zm-53.58-2.37c-.26-.62-.5-1.26-.72-1.9l1-.32c.21.62.44,1.24.69,1.84ZM151.88,282l-.94-.34c.22-.61.42-1.24.6-1.87l1,.27C152.32,280.72,152.11,281.37,151.88,282Zm-56.51-2.49c-.17-.66-.32-1.32-.44-2l1-.18c.12.64.27,1.28.43,1.91ZM153,278.1l-1-.21c.13-.63.25-1.28.33-1.93l1,.13C153.23,276.77,153.12,277.44,153,278.1Zm-58.36-2.58c-.08-.67-.13-1.35-.16-2l1,0c0,.65.09,1.3.17,1.95Zm58.91-1.45-1-.07c.05-.65.07-1.31.07-2h1C153.6,272.72,153.58,273.4,153.53,274.07Zm-58.1-2.59-1,0c0-.67,0-1.36.1-2l1,.09C95.47,270.17,95.44,270.83,95.43,271.48Zm57.16-.28c0-.66-.06-1.32-.12-2l1-.1c.07.67.11,1.35.13,2Zm-56.82-3.63-1-.16c.1-.66.23-1.33.38-2l1,.22C96,266.28,95.87,266.93,95.77,267.57Zm56.44-.28c-.11-.64-.24-1.29-.39-1.93l1-.23c.16.66.29,1.33.4,2Zm-55.57-3.55-1-.29c.19-.64.41-1.29.65-1.92l.94.35C97,262.49,96.83,263.12,96.64,263.74Zm54.66-.27c-.2-.62-.42-1.24-.66-1.85l.93-.37c.25.63.48,1.28.68,1.92ZM98,260.07l-.91-.42c.28-.61.59-1.23.92-1.82l.88.48C98.61,258.88,98.31,259.48,98,260.07Zm51.83-.25c-.28-.59-.59-1.18-.91-1.75l.88-.49c.33.59.64,1.2.93,1.81Zm-49.94-3.2-.84-.54c.36-.57.75-1.13,1.16-1.67l.8.59C100.66,255.53,100.28,256.07,99.93,256.62Zm48-.22c-.36-.55-.74-1.09-1.14-1.61l.8-.6c.41.54.8,1.1,1.17,1.66Zm-45.68-2.93-.76-.65c.44-.51.9-1,1.38-1.5l.71.7C103.14,252.49,102.7,253,102.27,253.47Zm43.3-.2c-.42-.49-.87-1-1.34-1.44l.71-.71c.48.48.95,1,1.39,1.49ZM105,250.66l-.66-.74c.5-.45,1-.89,1.56-1.3l.62.79C106,249.81,105.51,250.23,105,250.66Zm37.78-.17c-.49-.43-1-.85-1.53-1.24l.61-.8c.54.41,1.07.84,1.57,1.28Zm-34.67-2.23-.56-.83c.57-.38,1.15-.74,1.73-1.07l.5.87C109.23,247.55,108.67,247.9,108.13,248.26Zm31.54-.15c-.55-.35-1.11-.7-1.68-1l.49-.87c.59.33,1.17.69,1.74,1.06Zm-28.14-1.8-.43-.9c.61-.3,1.23-.58,1.85-.82l.38.92C112.73,245.75,112.12,246,111.53,246.31Zm24.71-.12c-.59-.28-1.2-.54-1.8-.78l.36-.93c.63.24,1.26.52,1.87.81Zm-21.07-1.35-.31-1c.65-.21,1.31-.4,2-.56l.24,1Q116.12,244.54,115.17,244.84Zm17.41-.08c-.63-.2-1.26-.38-1.89-.53l.23-1c.65.16,1.31.34,2,.54Zm-13.6-.87-.17-1c.66-.11,1.34-.21,2-.28l.11,1C120.28,243.68,119.62,243.78,119,243.89Zm9.78,0c-.64-.1-1.3-.19-1.95-.25l.1-1c.67.07,1.35.16,2,.27Zm-5.87-.37,0-1c.67,0,1.36,0,2,0l0,1C124.2,243.44,123.54,243.45,122.89,243.47Z" transform="translate(-79.36 -47.97)"/>
            </motion.g>
            <motion.g id="circle2">
            <motion.path className="cls-3" d="M124,218.8h-.29v-1H124c.57,0,1.13,0,1.69-.05l.06,1C125.18,218.79,124.6,218.8,124,218.8Zm-2.32-.09c-.68-.05-1.36-.13-2-.22l.15-1c.64.09,1.29.16,2,.22Zm6.09-.15-.13-1c.65-.08,1.3-.19,1.94-.31l.2,1C129.12,218.37,128.45,218.48,127.78,218.56Zm-10.11-.44c-.65-.14-1.32-.31-2-.5l.28-1c.63.18,1.27.35,1.9.48Zm14.1-.35-.27-1c.63-.17,1.26-.37,1.88-.58l.33,1C133.07,217.4,132.42,217.6,131.77,217.77Zm-18-.79c-.63-.23-1.26-.49-1.88-.77l.4-.91c.61.27,1.22.52,1.83.74Zm21.83-.54-.39-.92c.6-.25,1.2-.53,1.78-.83l.45.89C136.84,215.89,136.22,216.18,135.6,216.44Zm-25.54-1.13c-.6-.32-1.19-.66-1.76-1l.53-.85c.55.35,1.13.68,1.7,1Zm29.16-.71-.51-.86c.56-.33,1.11-.69,1.64-1.07l.58.82Q140.09,214.08,139.22,214.6Zm-32.61-1.45c-.54-.4-1.08-.82-1.6-1.25l.64-.77c.5.42,1,.83,1.55,1.21Zm35.94-.88-.62-.78c.5-.4,1-.84,1.48-1.28l.68.74C143.6,211.4,143.08,211.85,142.55,212.27Zm-39.05-1.73c-.49-.47-1-1-1.42-1.46l.74-.67c.44.48.9,1,1.37,1.41Zm42-1-.73-.69c.45-.48.88-1,1.3-1.48l.77.64C146.45,208.51,146,209,145.54,209.52Zm-44.77-2c-.42-.53-.83-1.08-1.21-1.64l.83-.56c.37.53.76,1.07,1.16,1.58Zm47.35-1.15-.82-.59c.38-.53.75-1.08,1.09-1.63l.85.52C148.89,205.26,148.51,205.83,148.12,206.38Zm-49.64-2.21c-.35-.58-.67-1.18-1-1.78l.89-.45c.29.59.61,1.17.94,1.73Zm51.77-1.26-.89-.46c.3-.59.59-1.18.85-1.78l.92.4C150.86,201.69,150.56,202.31,150.25,202.91Zm-53.58-2.37c-.26-.62-.5-1.26-.72-1.9l1-.32c.21.62.44,1.24.69,1.84Zm55.21-1.36-.94-.34c.22-.61.42-1.24.6-1.87l1,.27C152.32,197.89,152.11,198.55,151.88,199.18Zm-56.51-2.49c-.17-.66-.32-1.32-.44-2l1-.18c.12.64.27,1.28.43,1.91ZM153,195.27l-1-.2c.13-.64.25-1.29.33-1.94l1,.14C153.23,193.94,153.12,194.61,153,195.27Zm-58.36-2.58c-.08-.67-.13-1.35-.16-2l1,0c0,.65.09,1.3.17,2Zm58.91-1.45-1-.07c.05-.65.07-1.31.07-2h1C153.6,189.89,153.58,190.57,153.53,191.24Zm-58.1-2.59-1,0c0-.67,0-1.35.1-2l1,.09C95.47,187.34,95.44,188,95.43,188.65Zm57.16-.28c0-.66-.06-1.31-.12-2l1-.1c.07.67.11,1.35.13,2Zm-56.82-3.63-1-.16c.1-.66.23-1.33.38-2l1,.22C96,183.45,95.87,184.1,95.77,184.74Zm56.44-.28c-.11-.64-.24-1.29-.39-1.92l1-.24c.16.66.29,1.33.4,2Zm-55.57-3.55-1-.29c.19-.64.41-1.29.65-1.92l.94.35C97,179.66,96.83,180.29,96.64,180.91Zm54.66-.27c-.2-.62-.42-1.24-.66-1.85l.93-.36c.25.62.48,1.27.68,1.91ZM98,177.24l-.91-.42c.28-.61.59-1.23.92-1.82l.88.48C98.61,176.06,98.31,176.65,98,177.24Zm51.83-.25c-.28-.59-.59-1.18-.91-1.75l.88-.48c.33.58.64,1.19.93,1.8Zm-49.94-3.2-.84-.54c.36-.57.75-1.13,1.16-1.67l.8.59C100.66,172.7,100.28,173.24,99.93,173.79Zm48-.22c-.36-.55-.74-1.09-1.14-1.61l.8-.6c.41.54.8,1.1,1.17,1.66Zm-45.68-2.93-.76-.65c.44-.51.9-1,1.38-1.5l.71.7C103.14,169.66,102.7,170.14,102.27,170.64Zm43.3-.2c-.42-.49-.87-1-1.34-1.44l.71-.71c.48.48.95,1,1.39,1.49ZM105,167.83l-.66-.74c.5-.45,1-.89,1.56-1.3l.62.79C106,167,105.51,167.4,105,167.83Zm37.78-.17c-.49-.43-1-.85-1.53-1.24l.61-.8c.54.41,1.07.84,1.57,1.28Zm-34.67-2.23-.56-.83c.57-.38,1.15-.74,1.73-1.07l.5.87C109.23,164.72,108.67,165.07,108.13,165.43Zm31.54-.15c-.55-.35-1.11-.7-1.68-1l.49-.87c.59.33,1.17.69,1.74,1.06Zm-28.14-1.8-.43-.9c.61-.3,1.23-.57,1.85-.82l.38.92C112.73,162.92,112.12,163.19,111.53,163.48Zm24.71-.12c-.59-.28-1.2-.54-1.8-.78l.36-.93c.63.24,1.26.52,1.87.81ZM115.17,162l-.31-.95c.65-.21,1.31-.4,2-.56l.24,1Q116.12,161.71,115.17,162Zm17.41-.08c-.63-.2-1.26-.38-1.89-.53l.23-1c.65.16,1.31.34,2,.54Zm-13.6-.87-.17-1c.66-.12,1.34-.22,2-.29l.11,1C120.28,160.85,119.62,161,119,161.06Zm9.78-.05c-.64-.1-1.3-.19-1.95-.25l.1-1c.67.07,1.35.16,2,.27Zm-5.87-.37,0-1c.67,0,1.36,0,2,0l0,1C124.2,160.61,123.54,160.62,122.89,160.64Z" transform="translate(-79.36 -47.97)"/>
            </motion.g>
            <motion.g id="circle1"
            whileHover={{ scale: 1.2, rotate: 90 }}>
            <motion.path className="cls-3" d="M124,137h-.29v-1H124c.57,0,1.13,0,1.69-.05l.06,1C125.18,137,124.6,137,124,137Zm-2.32-.09c-.68,0-1.36-.12-2-.22l.15-1c.64.09,1.29.17,2,.22Zm6.09-.14-.13-1c.65-.08,1.3-.18,1.94-.31l.2,1Q128.79,136.6,127.78,136.74Zm-10.11-.45c-.65-.14-1.32-.31-2-.5l.28-1c.63.18,1.27.35,1.9.49Zm14.1-.34-.27-1c.63-.17,1.26-.36,1.88-.58l.33.95C133.07,135.57,132.42,135.77,131.77,136Zm-18-.8c-.63-.23-1.26-.49-1.88-.77l.4-.91q.92.41,1.83.75Zm21.83-.53-.39-.92c.6-.26,1.2-.54,1.78-.84l.45.9C136.84,134.06,136.22,134.35,135.6,134.62Zm-25.54-1.13c-.6-.32-1.19-.67-1.76-1l.53-.84c.55.34,1.13.68,1.7,1Zm29.16-.72-.51-.86c.56-.33,1.11-.69,1.64-1.06l.58.82C140.37,132.05,139.8,132.42,139.22,132.77Zm-32.61-1.45c-.54-.4-1.08-.82-1.6-1.25l.64-.77c.5.42,1,.83,1.55,1.21Zm35.94-.87-.62-.78c.5-.41,1-.85,1.48-1.29l.68.74C143.6,129.57,143.08,130,142.55,130.45Zm-39.05-1.74c-.49-.46-1-1-1.42-1.46l.74-.67c.44.49.9,1,1.37,1.41Zm42-1-.73-.69c.45-.47.88-1,1.3-1.47l.77.63C146.45,126.68,146,127.2,145.54,127.69Zm-44.77-2c-.42-.53-.83-1.08-1.21-1.64l.83-.56c.37.54.76,1.07,1.16,1.58Zm47.35-1.15-.82-.58c.38-.53.75-1.09,1.09-1.64l.85.52C148.89,123.43,148.51,124,148.12,124.55Zm-49.64-2.2c-.35-.59-.67-1.19-1-1.79l.89-.45c.29.59.61,1.17.94,1.73Zm51.77-1.27-.89-.46c.3-.58.59-1.18.85-1.78l.92.41C150.86,119.86,150.56,120.48,150.25,121.08Zm-53.58-2.37c-.26-.62-.5-1.26-.72-1.9l1-.32c.21.62.44,1.24.69,1.84Zm55.21-1.36-.94-.33c.22-.62.42-1.25.6-1.87l1,.27C152.32,116.07,152.11,116.72,151.88,117.35Zm-56.51-2.49c-.17-.65-.32-1.32-.44-2l1-.18c.12.64.27,1.29.43,1.92ZM153,113.44l-1-.2c.13-.64.25-1.29.33-1.94l1,.14C153.23,112.11,153.12,112.78,153,113.44Zm-58.36-2.58c-.08-.67-.13-1.35-.16-2l1,0c0,.65.09,1.31.17,2Zm58.91-1.45-1-.06c.05-.65.07-1.31.07-2h1C153.6,108.06,153.58,108.74,153.53,109.41Zm-58.1-2.59-1,0c0-.67,0-1.35.1-2l1,.08C95.47,105.51,95.44,106.17,95.43,106.82Zm57.16-.28c0-.65-.06-1.31-.12-2l1-.1c.07.67.11,1.36.13,2Zm-56.82-3.63-1-.15c.1-.67.23-1.34.38-2l1,.22C96,101.62,95.87,102.27,95.77,102.91Zm56.44-.28c-.11-.64-.24-1.29-.39-1.92l1-.23c.16.65.29,1.32.41,2ZM96.64,99.08l-1-.29c.19-.64.41-1.29.65-1.92l.94.35C97,97.84,96.83,98.46,96.64,99.08Zm54.66-.27c-.2-.62-.42-1.24-.66-1.85l.93-.36c.25.63.48,1.27.68,1.91ZM98,95.41,97.13,95c.29-.61.59-1.22.92-1.82l.88.48C98.61,94.23,98.31,94.82,98,95.41Zm51.83-.25c-.28-.59-.59-1.18-.91-1.74l.88-.49c.33.58.64,1.19.93,1.8ZM99.93,92l-.84-.54c.36-.57.75-1.13,1.16-1.67l.8.6C100.66,90.87,100.28,91.41,99.93,92Zm48-.22c-.35-.54-.73-1.08-1.13-1.61l.8-.6c.41.54.8,1.1,1.17,1.66Zm-45.67-2.93-.76-.65c.44-.51.9-1,1.38-1.5l.71.7C103.14,87.83,102.7,88.32,102.27,88.81Zm43.3-.2c-.42-.49-.87-1-1.34-1.44l.71-.7c.48.48.95,1,1.39,1.48ZM105,86l-.66-.75c.51-.45,1-.89,1.57-1.3l.61.79C106,85.15,105.51,85.57,105,86Zm37.78-.18c-.49-.43-1-.85-1.53-1.24l.61-.8c.54.41,1.07.84,1.58,1.29ZM108.13,83.6l-.56-.83c.57-.37,1.15-.73,1.73-1.07l.5.87C109.24,82.89,108.67,83.24,108.13,83.6Zm31.54-.14q-.82-.54-1.68-1l.49-.88c.59.33,1.17.69,1.74,1.06Zm-28.14-1.81-.43-.9c.61-.3,1.23-.57,1.85-.82l.38.93C112.73,81.1,112.12,81.36,111.53,81.65Zm24.71-.12c-.59-.28-1.2-.54-1.8-.78l.36-.93c.63.25,1.26.52,1.87.81Zm-21.07-1.35-.31-1c.65-.21,1.31-.4,2-.56l.24,1Q116.12,79.88,115.17,80.18Zm17.41-.08c-.62-.2-1.26-.37-1.89-.52l.23-1c.65.16,1.31.34,2,.54ZM119,79.23l-.17-1c.66-.12,1.34-.22,2-.29l.11,1C120.28,79,119.62,79.12,119,79.23Zm9.78,0c-.64-.11-1.29-.2-1.95-.26l.1-1c.67.07,1.35.16,2,.27Zm-5.87-.38,0-1c.67,0,1.36,0,2,0l0,1C124.2,78.79,123.54,78.79,122.89,78.81Z" transform="translate(-79.36 -47.97)"/>
            </motion.g>
        </motion.g>

CodePudding user response:

As commented, the current svg structure won't allow the desired pointer events, since all dashed strokes are converted to hardcoded objects - there is no inner fill area, that could be used for pointer events.

body{
background:#000;
color:#fff
}

svg{
  width:20em;
  overflow:visible;
  margin:1em;
}

circle:hover,
path:hover{
  fill:red;
}
<p>Pointer area is stroke - hover works on stroke</p>
<svg viewBox="0 0 60 60">
  <path d="M29.5 59.1h-0.3v-1h0.3c0.6 0 1.1 0 1.7 0l0.1 1c-0.6 0-1.2 0-1.8 0zm-2.3-0.1c-0.7 0-1.4-0.1-2-0.2l0.1-1c0.6 0.1 1.3 0.2 2 0.2zm6.1-0.1l-0.1-1c0.6-0.1 1.3-0.2 1.9-0.3l0.2 1c-0.7 0.1-1.3 0.2-2 0.3zm-10.1-0.5c-0.7-0.1-1.3-0.3-2-0.5l0.3-1c0.6 0.2 1.3 0.4 1.9 0.5zm14.1-0.3l-0.3-1c0.6-0.2 1.3-0.4 1.9-0.6l0.3 1c-0.6 0.2-1.3 0.4-1.9 0.6zm-18-0.8c-0.6-0.2-1.3-0.5-1.9-0.8l0.4-0.9c0.6 0.3 1.2 0.5 1.8 0.8zm21.8-0.5l-0.4-0.9c0.6-0.3 1.2-0.5 1.8-0.8l0.5 0.9c-0.6 0.3-1.2 0.6-1.8 0.9zm-25.5-1.1c-0.6-0.3-1.2-0.7-1.8-1l0.5-0.8c0.6 0.3 1.1 0.7 1.7 1zm29.2-0.7l-0.5-0.9c0.6-0.3 1.1-0.7 1.6-1.1l0.6 0.8c-0.6 0.4-1.1 0.8-1.7 1.1zm-32.6-1.5c-0.5-0.4-1.1-0.8-1.6-1.3l0.6-0.8c0.5 0.4 1 0.8 1.6 1.2zm35.9-0.9l-0.6-0.8c0.5-0.4 1-0.9 1.5-1.3l0.7 0.7c-0.5 0.5-1 0.9-1.5 1.4zm-39-1.7c-0.5-0.5-1-1-1.4-1.5l0.7-0.7c0.4 0.5 0.9 1 1.4 1.4zm42-1l-0.7-0.7c0.5-0.5 0.9-1 1.3-1.5l0.8 0.6c-0.4 0.5-0.8 1.1-1.3 1.6zm-44.8-2c-0.4-0.5-0.8-1.1-1.2-1.6l0.8-0.6c0.4 0.5 0.8 1.1 1.2 1.6zm47.4-1.1l-0.8-0.6c0.4-0.5 0.8-1.1 1.1-1.6l0.9 0.5c-0.3 0.6-0.7 1.2-1.1 1.7zm-49.6-2.2c-0.3-0.6-0.7-1.2-1-1.8l0.9-0.5c0.3 0.6 0.6 1.2 0.9 1.7zm51.8-1.3l-0.9-0.5c0.3-0.6 0.6-1.2 0.9-1.8l0.9 0.4c-0.2 0.6-0.5 1.3-0.8 1.9zm-53.6-2.4c-0.3-0.6-0.5-1.3-0.7-1.9l1-0.3c0.2 0.6 0.4 1.2 0.7 1.8zm55.2-1.4l-0.9-0.3c0.2-0.6 0.4-1.3 0.6-1.9l1 0.3c-0.2 0.7-0.4 1.3-0.6 2zm-56.5-2.5c-0.2-0.6-0.3-1.3-0.4-2l1-0.2c0.1 0.6 0.3 1.3 0.4 1.9zm57.7-1.4l-1-0.2c0.1-0.6 0.3-1.3 0.3-1.9l1 0.1c-0.1 0.7-0.2 1.3-0.3 2zm-58.4-2.6c-0.1-0.7-0.1-1.4-0.2-2h1c0 0.6 0.1 1.3 0.2 2zm58.9-1.4l-1-0.1c0-0.6 0.1-1.3 0.1-2h1c0 0.7 0 1.4-0.1 2.1zm-58.1-2.6h-1c0-0.7 0-1.4 0.1-2l1 0.1c-0.1 0.6-0.1 1.3-0.1 1.9zm57.2-0.3c0-0.6-0.1-1.3-0.1-2l1-0.1c0.1 0.7 0.1 1.4 0.1 2zm-56.8-3.6l-1-0.1c0.1-0.7 0.2-1.3 0.4-2l1 0.2c-0.2 0.6-0.3 1.3-0.4 1.9zm56.4-0.3c-0.1-0.6-0.2-1.3-0.4-1.9l1-0.2c0.2 0.6 0.3 1.3 0.4 2zm-55.6-3.5l-1-0.3c0.2-0.6 0.4-1.3 0.6-1.9l0.9 0.4c-0.2 0.6-0.4 1.2-0.6 1.9zm54.7-0.3c-0.2-0.6-0.4-1.2-0.7-1.9l0.9-0.4c0.3 0.6 0.5 1.3 0.7 1.9zm-53.3-3.4l-0.9-0.4c0.3-0.6 0.6-1.2 0.9-1.8l0.9 0.5c-0.3 0.6-0.6 1.2-0.9 1.8zm51.8-0.3c-0.3-0.6-0.6-1.2-0.9-1.7l0.9-0.5c0.3 0.6 0.6 1.2 0.9 1.8zm-49.9-3.2l-0.8-0.5c0.4-0.6 0.8-1.1 1.2-1.7l0.8 0.6c-0.3 0.5-0.7 1.1-1.1 1.6zm48-0.2c-0.4-0.6-0.7-1.1-1.1-1.6l0.8-0.6c0.4 0.5 0.8 1.1 1.2 1.7zm-45.7-2.9l-0.8-0.7q0.7-0.8 1.4-1.5l0.7 0.7c-0.4 0.5-0.9 0.9-1.3 1.4zm43.3-0.2c-0.4-0.5-0.9-1-1.3-1.4l0.7-0.7c0.5 0.5 1 1 1.4 1.5zm-40.5-2.6l-0.7-0.8c0.5-0.5 1-0.9 1.6-1.3l0.6 0.8c-0.5 0.4-1 0.8-1.5 1.3zm37.8-0.2c-0.5-0.4-1-0.8-1.5-1.2l0.6-0.8c0.5 0.4 1.1 0.9 1.6 1.3zm-34.7-2.2l-0.6-0.8c0.6-0.4 1.2-0.7 1.7-1.1l0.5 0.9c-0.5 0.3-1.1 0.7-1.7 1zm31.5-0.1c-0.5-0.4-1.1-0.7-1.7-1l0.5-0.9c0.6 0.3 1.2 0.7 1.7 1.1zm-28.1-1.8l-0.4-0.9c0.6-0.3 1.2-0.6 1.9-0.8l0.4 0.9c-0.6 0.2-1.2 0.5-1.8 0.8zm24.7-0.1c-0.6-0.3-1.2-0.5-1.8-0.8l0.4-0.9c0.6 0.3 1.3 0.5 1.9 0.8zm-21.1-1.4l-0.3-1c0.6-0.2 1.3-0.4 2-0.6l0.2 1c-0.6 0.1-1.3 0.3-1.9 0.5zm17.4-0.1c-0.6-0.2-1.3-0.4-1.9-0.5l0.2-1c0.6 0.2 1.3 0.3 2 0.5zm-13.6-0.8l-0.2-1c0.7-0.1 1.3-0.2 2-0.3l0.1 1c-0.7 0-1.3 0.1-1.9 0.3zm9.8-0.1c-0.6-0.1-1.3-0.2-2-0.3l0.1-1c0.7 0.1 1.3 0.2 2 0.3zm-5.9-0.4v-1c0.7 0 1.4 0 2 0v1c-0.7-0.1-1.4-0.1-2-0.1z" fill="#cccccc" stroke="#000000" stroke-width="0" stroke-linecap="butt"></path>
</svg>

<p>Stroke via stroke-dasharray; Transparent fill - hover works</p>
<svg viewBox="0 0 60 60">
  <circle cx="50%" cy="50%" r="50%" fill="transparent" stroke-dasharray="2 3" stroke-width="1" stroke="#ccc" />
</svg>

<p>No fill: hover doesn't work</p>
<svg viewBox="0 0 60 60">
  <circle cx="50%" cy="50%" r="50%" fill="none" stroke-dasharray="2 3" stroke-width="1" stroke="#ccc" />
</svg>

I'm afraid refactoring the graphic is the only solution - Hopefully the original graphic files with dynamic/styled strokes still exists.

  • Related