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

您可以使用translation：

＆＃13;

@keyframes moveText {
    100% {
        transform:translateY(200px);
    }
}

#Achieve {
    animation:moveText 1s linear;
    animation-fill-mode:forwards;
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用SVG animate元素。

我想将x = 100移动到x = 300

如果将文本移动到300，它将显示在视图框之外。您需要考虑文本的宽度。

实施例

<svg width="300px" height="300px" viewBox="0 0 300 300" version="1.1">
    <text id="Achieve" fill="#CCD1D9">
        <tspan x="200" y="264">Achieve
           <animate attributeType="XML" attributeName="x" from="100" to="200"
        dur="1s" repeatCount="0"/></tspan>
    </text>
</svg>

动画片tspan x＆amp; ÿ

2 个答案: