css - 动画 tspan x & y

Question

CSS

@keyframes moveText {
    0% {
        y:100;
    }
    100% {
        y:300;
    }
}

#Achieve tspan {
    animation:moveText 1s linear;
    animation-fill-mode:forwards;
}    

SVG

<svg width:"300px" height:"300px" viewBox="0 0 300 300" version="1.1">
    <text id="Achieve" fill="#CCD1D9">
        <tspan x="100" y="264">Achieve</tspan>
    </text>
</svg>

我有我想要制作动画的 SVG 图像。我想将 x=100 移动到 x=300 但我已经尝试了一切(我能想到的)但没有任何效果。

谢谢。

Answer 1

您可以使用翻译:

@keyframes moveText {
    100% {
        transform:translateY(200px);
    }
}

#Achieve {
    animation:moveText 1s linear;
    animation-fill-mode:forwards;
} 

<svg width="300" viewBox="0 0 300 300" version="1.1">
    <text id="Achieve" fill="#000" x="100" y="100">
        <tspan >Achieve</tspan>
    </text>
</svg>