仅当将鼠标悬停在圆圈上时，才可以沿文本路径对SVG文本进行动画处理 [英] Animate SVG text along a text-path only when hovering over a circle
本文介绍了仅当将鼠标悬停在圆圈上时，才可以沿文本路径对SVG文本进行动画处理的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想将动画从HTML移到
css.我只想将鼠标悬停在<circle id="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>
我的小提琴: https://jsfiddle.net/ezouras/1ndac69e/
推荐答案
您无法使用CSS设置startOffset的动画.它不是可以指定的属性之一用CSS设置样式.
You can't animate startOffset with CSS. It is not one of the designated properties that can be styled with CSS.
您将需要使用SMIL动画(如您现在所进行的操作)或Javascript.
You would need to either use SMIL animation (as you are doing now), or Javascript.
但是，由于您的路径只是一个圆，为什么不通过旋转<textPath>来移动文本?
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>
这篇关于仅当将鼠标悬停在圆圈上时，才可以沿文本路径对SVG文本进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
