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

HTML5 SVGで角丸の長方形を作成する方法【rx・ry属性の使い方】

SVG（Scalable Vector Graphics）は、XMLを使用して2Dグラフィックスやグラフィカルなアプリケーションを記述するための言語です。記述されたXMLは、SVGビューアによって描画されます。現在、主要なWebブラウザの多くは、PNGやGIF、JPGなどの画像形式と同じようにSVGを表示できるようになっています。

HTMLのSVGで長方形を描画するには、<rect>要素を使用します。さらに、角を丸くしたい場合はrx属性とry属性を指定します。この2つの属性に値を設定することで、長方形の四隅が滑らかに丸められます。

HTML5 SVGで角丸の長方形を作成する方法【rx・ry属性の使い方】

実装例

以下のコードを実行すると、HTML5 SVGで角丸の長方形を描画する方法を実際に確認できます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #svgelem {
            position: relative;
            left: 10%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>SVG</title>
   </head>

   <body>
      <h2>HTML5 SVG Rectangle</h2>
      <svg id="svgelem" width="300" height="200" xmlns="https://www.w3.org/2000/svg">
         <rect x="50" y="20" rx="30" ry="30" width="150" height="150"
            style="fill:blue;/">
      </svg>
   </body>
</html>

  1. HTML5でSVG（Scalable Vector Graphics）を操作する方法をわかりやすく解説

    SVGは「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）」の略称で、2DグラフィックスやグラフィックアプリケーションをXML形式で記述するための言語です。記述されたXMLコードは、SVGビューアによって描画されます。SVGは、円グラフやXY座標系における2次元グラフなど、ベクター形式の図表を扱う場面で特に威力を発揮します。拡大・縮小しても画質が劣化しない点も大きな特徴です。HTML5でSVGを使用する基本的な方法HTML5でSVG（Scalable Vector Graphics）を扱うには、<svg>...</svg>タグを

  2. HTML5でSVG画像を使用する方法｜img・object・embedタグの使い分けを解説

    HTML5でSVG画像を表示する基本 HTML5でSVG（Scalable Vector Graphics）画像を利用するには、<img>要素または<svg>要素を使用します。SVGファイルをWebページに組み込む方法は主に3つあり、それぞれ特徴が異なるため、用途に応じて適切なものを選択することが重要です。 SVGを読み込む3つの方法 <img>タグ：最もシンプルな方法。JPEGやPNGなどの通常の画像と同じ感覚で扱えます。 <object>タグ：外部リソースとしてSVGを読み込みます。フォールバックコンテンツを指定できるのが特徴です。 &l