Question

我想将动画从HTML移到 CSS。我只想将鼠标悬停在<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>

我的小提琴：https://jsfiddle.net/ezouras/1ndac69e/

Answer 1

您无法使用CSS为startOffset设置动画。它不是可以使用CSS设置样式的指定properties之一。

您需要使用SMIL动画（正如您现在所做的那样）或Javascript。

但是，由于您的路径只是一个圆圈，为什么不通过旋转<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>

Answer 2

当鼠标悬停在圆圈的路径上时，您需要修改<animate>开始，并在第一个动画开始后经过5秒后触发第二个动画，修改这两行。

<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'是第一个动画的id。第二个动画可以在任何时候开始，参考第一个动画的开头使用'go.begin + seconds'，或者如果必须在第一个动画结束时开始，'go.end'。

工作解决方案：

.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>

仅在悬停在圆上时，沿文本路径为SVG文本设置动画

2 个答案: