Got it, let's convert that SVG text path animation from native <animate> tags to CSS, and make it only run when hovering over the circle. Here's the complete solution:

<svg height="600" width="800">
  <style>
    /* Define the keyframe animation matching the original timing */
    @keyframes textPathTravel {
      0% {
        startOffset: 48%;
      }
      55.56% { /* 5s into 9s total duration */
        startOffset: 90%;
      }
      100% {
        startOffset: 48%;
      }
    }

    /* Default state: text stays at initial position */
    #circleTextPath {
      startOffset: 48%;
    }

    /* Trigger animation only when hovering the circle */
    #circle:hover ~ #circleText #circleTextPath {
      animation: textPathTravel 9s linear forwards;
      animation-iteration-count: 1;
    }

    /* Optional: Style the circle for better hover feedback */
    #circle {
      fill: transparent;
      stroke: #ccc;
      cursor: pointer;
    }
  </style>
  <g>
    <circle id="circle" cx="400" cy="300" r="130" />
    <path id="arc" d="M395 170.1 A 130 130, 0, 1, 0, 400 170 Z" stroke="green" fill="transparent"/>
    <text id="circleText" width="500">
      <!-- Use modern `href` instead of deprecated `xlink:href` -->
      <textPath id="circleTextPath" href="#arc"> Resume </textPath>
    </text>
  </g>
</svg>

Key Changes Explained: #

• Removed SVG <animate> tags: We replaced the native SVG animations with a CSS @keyframes rule that replicates the original motion:
  • Starts at 48% startOffset
  • Moves to 90% at the 5-second mark (55.56% of the total 9-second duration)
  • Slides back to 48% by the 9-second mark
• Hover-triggered animation: Used the sibling selector (~) to target the text path only when #circle is hovered. This ensures the animation only runs on user interaction.
• Modern SVG syntax: Updated xlink:href to the standard href attribute for better cross-browser support.
• Added hover feedback: Optional styling for the circle to make it clear it's interactive (transparent fill, gray stroke, pointer cursor).

This approach keeps your animation logic in CSS (easier to maintain alongside other styles) and restricts it to hover events as requested.

内容的提问来源于stack exchange，提问作者Evelyn Zouras