,可以通过以下步骤实现:
<svg id="my-svg" width="200" height="200">
<circle cx="100" cy="100" r="50" fill="red" />
</svg>
@keyframes move {
from {
transform: translateX(-100%);
}
to {
transform: translateX(50%);
}
}
#my-svg circle {
animation: move 2s forwards;
}
var circle = document.querySelector("#my-svg circle");
circle.style.animation = "none"; // 停止CSS动画
circle.setAttribute("cx", "150"); // 设置圆心的x坐标为150
这样,动画SVG将停止在屏幕上的指定位置。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云