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

SVGで中空の円（輪郭のみの円）を描く方法を解説

SVGで中空の円（塗りつぶしなしの輪郭だけの円）を描くには、<circle>要素を使用します。ポイントは、fill="none"を指定して内側を透明にし、stroke属性で輪郭線を描画することです。

SVGとは？

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

SVGで中空の円（輪郭のみの円）を描く方法を解説

サンプルコード

以下のコードを実行すると、SVGで中空の円を描く方法を実際に確認できます。cxとcyで中心座標を、rで半径を指定し、stroke-widthで線の太さを調整しています。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 SVG 中空の円</title>
   </head>
   <body>
      <svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">
         <circle cx="100" cy="50" r="40" stroke="black" stroke-width="7" fill="none" />
      </svg>
   </body>
</html>

実行結果

上記のコードをブラウザで表示すると、黒い輪郭線のみの中空の円が描画されます。fill属性を省略するとデフォルトで黒く塗りつぶされるため、中空にしたい場合は必ずfill="none"を指定しましょう。

SVGで中空の円（輪郭のみの円）を描く方法を解説

  1. JavaとOpenCVで塗りつぶし円を描画する方法

    Java OpenCVライブラリのorg.opencv.imgprocパッケージには、Imgprocクラスが含まれています。このクラスにはcircle()メソッドが用意されており、これを使用することで画像上に円を簡単に描画できます。 circle()メソッドのパラメータ circle()メソッドは、以下の引数を受け取ります。 Matオブジェクト: 円を描画する対象となる画像を表します。 Pointオブジェクト: 円の中心座標を表します。 int型の値: 円の半径を表します。 Scalarオブジェクト: 円の色をBGR形式で指定します。 int型の値: 線の太さを表します(デフォルトは1)。負

  2. JavaとOpenCVで円を描画する方法を徹底解説

    Java版OpenCVライブラリの org.opencv.imgproc パッケージには、Imgproc というクラスが含まれています。画像に円を描きたい場合は、このクラスが提供する circle() メソッドを呼び出します。このメソッドは以下のパラメータを受け取ります。Matオブジェクト：円を描画する対象となる画像を表します。Pointオブジェクト：円の中心座標を表します。int型の値：円の半径を表します。Scalarオブジェクト：円の色を表します。OpenCVでは色の指定順序がRGBではなくBGR（青・緑・赤）である点に注意してください。int型の値：円の輪郭線の太さを表します。デフォルト