JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5のSVG要素を画面中央に配置する方法

SVGは「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）」の略称で、XMLを用いて2Dグラフィックスやグラフィカルアプリケーションを記述するための言語です。記述されたXMLは、SVGビューアによって描画されます。

SVGの記述例

それでは、SVGの具体的な例を見てみましょう。以下のコードでは、赤い円を描画するSVG要素を配置しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>SVG</title>
      <meta charset="utf-8" />
   </head>
   <body>
      <h2>HTML5 SVG Circle</h2>
      <svg id = "svgelem" height = "200" xmlns = "https://www.w3.org/2000/svg">
         <circle id = "redcircle" cx = "50" cy = "50" r = "50" fill = "red" />
      </svg>
   </body>
</html>

この例では、position: relativeとleft: 50%、さらにtransform: translateX()を組み合わせることで、SVG要素の位置を調整しています。ベンダープレフィックス（-webkit-や-ms-）を付けることで、古いブラウザでも同様の表示が可能になります。

marginプロパティを使った中央揃え

SVG要素を画面の中央に配置するよりシンプルな方法として、以下のようなCSSを追加します。

#svgelem {
   margin-left: auto;
   margin-right: auto;
   display: block;
}

display: blockを指定してSVGをブロックレベル要素として扱い、左右のマージンをautoに設定することで、要素が水平方向の中央に自動的に配置されます。この手法はブラウザ間の互換性に優れており、レスポンシブデザインにも対応しやすいのが特徴です。

  1. JavaでJComboBoxのアイテムを中央揃えに表示する方法

    JComboBoxは、JComponentクラスのサブクラスであり、テキストフィールドとドロップダウンリストを組み合わせたコンポーネントです。ユーザーはこのリストから値を選択することができます。また、コンボボックスに対してユーザーが操作を行うと、ActionListener、ChangeListener、ItemListenerなどのイベントを発生させることができます。JComboBoxのアイテムはデフォルトでは左揃えで表示されますが、DefaultListCellRendererクラスのsetHorizontalAlignment(DefaultListCellRenderer.CENTER

  2. 【Python】Tkinterでウィンドウを画面の中央に配置する方法

    Tkinterで作成したウィンドウを画面の中央に配置したいケースはよくあります。本記事では、tk::PlaceWindow メソッドを使った簡単な方法と、ジオメトリ（geometry）を計算してプログラム的に中央へ配置する方法の2つを紹介します。 方法1：tk::PlaceWindow を使う（最も簡単） Tkinterには、ウィンドウを画面中央に配置するための組み込みコマンド tk::PlaceWindow が用意されています。このメソッドに対象となるトップレベル（toplevel）ウィンドウを引数として渡し、配置位置として「center」を指定するだけで、ウィンドウを画面の中央に表示でき