仅在将鼠标悬停在圆圈上时才沿文本路径为 SVG 文本设置动画
Posted
技术标签:
【中文标题】仅在将鼠标悬停在圆圈上时才沿文本路径为 SVG 文本设置动画【英文标题】：Animate SVG text along a text-path only when hovering over a circle 【发布时间】：2018-06-29 08:56:11 【问题描述】：我想将动画从 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" >
<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/
【问题讨论】：
【参考方案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" >
<textPath id="circleTextPath" xlink:href="#arc"
startOffset="48%">
Resume
</textPath>
</text>
</g>
</svg>
</div>
</body>
</html>【讨论】：
已修复示例，使其仅在将鼠标悬停在圆圈上时才会显示动画。【参考方案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" >
<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>【讨论】：
OP 正在询问如何使用 CSS 来实现 @PaulLebeau 我明白你的意思，但你也看到你的方法有问题吗？只要鼠标悬停，就会触发该事件，如果取出它，它会突然结束，不像过渡。我们不知道 OP 是否要在“悬停”或“只要”悬停时启动动画。以上是关于仅在将鼠标悬停在圆圈上时才沿文本路径为 SVG 文本设置动画的主要内容，如果未能解决你的问题，请参考以下文章