Animate SVG text along a text-path only when hovering over a circle

问题

I would like to move the animation from HTML to css. I would like to add it as an animation only when you hover over <circle id="circle"..

 <svg height=600 width=800>
        <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">
                      <textPath id="circleTextPath" xlink:href="#arc" startOffset="48%">
                        Resume
                        <animate attributeName="startOffset"
                        from="48%" to ="90%"
                        begin="0s" dur="5s"
                        repeatCount="1"/>
                        <animate attributeName="startOffset"
                        from="90%" to ="48%"
                        begin="5s" dur="4s"
                        repeatCount="1"/>
                      </textPath>
        </g>
      </svg>

My fiddle: https://jsfiddle.net/ezouras/1ndac69e/

回答1:

You can't animate startOffset with CSS. It is not one of the designated properties that can be styled with CSS.

You would need to either use SMIL animation (as you are doing now), or Javascript.

However since your path is simply a circle, why not just move the text by rotating the <textPath>?

.flex{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 0;
      padding: 0;
    }
    circle {
      fill: white;
      stroke: yellow;
      stroke-width: 2;
    }


#circle-and-text:hover {
  transform-origin: 400px 300px;
  animation-name: rotator;
  animation-duration: 9s;
  animation-iteration-count: infinite;
}

@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }

  55% {
    transform: rotate(-151deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
    <title>swing Text</title>
  </head>
  <body>
   <div class="flex">
     <svg height=600 width=800>
       <g id="circle-and-text">
         <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">
           <textPath id="circleTextPath" xlink:href="#arc"
            startOffset="48%">
               Resume
            </textPath>
          </text>
        </g>
      </svg>

    </div>
  </body>
</html>

回答2:

You need to modify your <animate> begin when the mouse hovers over the path of the circle and trigger the second animation after 5 seconds have been elapsed since the beginning of the first animation by modifying these two lines.

<animate attributeName="startOffset"
               from="48%" to ="90%"
               begin="arc.mouseover" dur="5s"
               repeatCount="1" id="go"/>
<animate attributeName="startOffset"
                from="90%" to ="48%"
                begin="go.begin + 5" dur="4s"
                repeatCount="1"/>

'go' is the id given to the first animation. The second animation can be started at any time elapsed with reference to the beginning of the first animation using 'go.begin + seconds' or if it has to be started when the first animation ends, 'go.end'.

Working solution:

.flex{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 0;
      padding: 0;
    }
    circle {
      fill: white;
      stroke: yellow;
      stroke-width: 2;
    }

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
    <title>swing Text</title>
  </head>
  <body>
   <div class="flex">
     <svg height=600 width=800>
       <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">
           <textPath id="circleTextPath" xlink:href="#arc"
            startOffset="48%">
               Resume
             <animate attributeName="startOffset"
               from="48%" to ="90%"
               begin="arc.mouseover" dur="5s"
               repeatCount="1" id="go"/>
               <animate attributeName="startOffset"
                from="90%" to ="48%"
                begin="go.begin + 5" dur="4s"
                repeatCount="1"/>
            </textPath>
            </text>
        </g>
      </svg>

    </div>
  </body>
</html>

来源：https://stackoverflow.com/questions/48352581/animate-svg-text-along-a-text-path-only-when-hovering-over-a-circle

标签

css

svg

hover

jquery-animate