私には 3 つの個別の SVG ファイルがあり、それぞれを重ね合わせるとグラフィックが作成されます。最初の SVG ファイルは赤い三角形、2 つ目は三角形の内側の青い円、3 つ目は三角形の底辺にある紫色の長方形です (三角形と長方形の間には少しスペースがあります)。私の目標は、3 つの SVG ファイルすべてをページの中央に重ねて配置することです。以下は私の HTML と CSS コードです。

リーリー リーリー

私の CSS でわかるように、--position:absolute; とposition:relative; を使用してみましたが、ページの中央でそれらを正しく重ねることができません。 SVG ファイルが適切に中央に配置されたら、 @keyframes を使用して SVG ファイルをアニメーション化することに注意してください。また、（別の方法がない限り）個別にアニメーション化する必要があるため、各 SVG ファイルの位置をページ上で固定することはできません。 (つまり、それらを移動できる必要があります)。誰か助けてくれませんか？前もって感謝します。