私には 3 つの個別の SVG ファイルがあり、それぞれを重ね合わせるとグラフィックが作成されます。最初の SVG ファイルは赤い三角形、2 つ目は三角形の内側の青い円、3 つ目は三角形の底辺にある紫色の長方形です (三角形と長方形の間には少しスペースがあります)。私の目標は、3 つの SVG ファイルすべてをページの中央に重ねて配置することです。以下は私の HTML と CSS コードです。
リーリー リーリー
私の CSS でわかるように、--position:absolute; とposition:relative; を使用してみましたが、ページの中央でそれらを正しく重ねることができません。 SVG ファイルが適切に中央に配置されたら、 @keyframes を使用して SVG ファイルをアニメーション化することに注意してください。また、（別の方法がない限り）個別にアニメーション化する必要があるため、各 SVG ファイルの位置をページ上で固定することはできません。 (つまり、それらを移動できる必要があります)。誰か助けてくれませんか？前もって感謝します。
P粉8608979432023-09-08 11:24:17
3 つの SVG ファイルを中央揃えしてカバーするには、Flexbox と絶対配置を使用できます。 HTML および CSS コードの更新バージョンは次のとおりです:
クラス「graphic」の外側の div は、Flexbox を使用して SVG ファイルを水平方向と垂直方向に配置します。これにより、確実にページの中央に配置されます。
各 SVG ファイルの位置は、互いに重なり合うように絶対位置に設定されています。
円形の SVG ファイルは、margin: auto を使用し、すべての辺 (上、右、下、左) を 0 に設定して、親 div 内で中央に配置されます。これにより、円が三角形の中で水平方向と垂直方向の中心に配置されます。
Bottom プロパティを使用して、長方形の SVG ファイルを一番下に配置します。 「bottom」の値を調整して、三角形と長方形の間のスペースを増減できます。