3 つの SVG ファイルをページ上で中央揃えにするにはどうすればよいですか?

Question

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

リーリー リーリー

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

Answer 1

3 つの SVG ファイルを中央揃えしてカバーするには、Flexbox と絶対配置を使用できます。 HTML および CSS コードの更新バージョンは次のとおりです:

リーリー リーリー

クラス「graphic」の外側の div は、Flexbox を使用して SVG ファイルを水平方向と垂直方向に配置します。これにより、確実にページの中央に配置されます。

各 SVG ファイルの位置は、互いに重なり合うように絶対位置に設定されています。

円形の SVG ファイルは、margin: auto を使用し、すべての辺 (上、右、下、左) を 0 に設定して、親 div 内で中央に配置されます。これにより、円が三角形の中で水平方向と垂直方向の中心に配置されます。

Bottom プロパティを使用して、長方形の SVG ファイルを一番下に配置します。 「bottom」の値を調整して、三角形と長方形の間のスペースを増減できます。

Answer 2

それらをすべて同じグリッドの行と列に配置するだけです。

リーリー リーリー