Question

我目前正在网站上，我必须对此shape（使用svg创建）进行动画处理。对于动画，我想做些清醒的事情，将鼠标悬停在该形状上以得到that之类的矩形时，只需对形状进行 x 转换即可。

HTML：

        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="12.5em" preserveAspectRatio="xMaxYMin slice" class="spaceBetweenButton" >
            <polygon fill="#00a8f3" points="0 0, 83 0, 0 83"/>

            <foreignObject width="24em" height="1em">
                <textArea readonly xmlns="http://www.w3.org/1999/xhtml" style="background-color: transparent; border: none; width: 24em; height: 9em; padding-top: 0.5em; padding-bottom:0;line-height: 1.1em" class="textFont">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in interdum enim. Morbi enim sem</textArea>
            </foreignObject>

            <polygon fill="#00a8f3" class="test" points="85 0, 100 0, 100 100, 0 85"/>  

            <foreignObject width="24em" height="7em">
                <textArea readonly xmlns="http://www.w3.org/1999/xhtml" style="background-color: transparent; border: none; width: 5.5em; height: 10em; line-height: 0.9em" class="buttonFontRight test">Lorem ipsum dolor sit</textArea>
            </foreignObject>

        </svg>

我的问题是我不知道在CSS @keyframes和SMIL之间选择哪一个来移动正确形状的整体，以及如何区分这两个形状。

感谢您的帮助。

瓦伦丁。

Answer 1

好吧，如果您只有一个简单的X转换，我建议您使用transform: translateX(-50px)（或您需要多少像素）。但是，如果需要制作动画，则应使用关键帧。

CSS @keyframes或SMIL，选择哪种动画？

1 个答案: