SVG <rect>

SVGには、開発者が使用および操作できるいくつかのプレ定义された形状要素があります。

SVG形状

SVGには、開発者が使用および操作できるいくつかのプレ定义された形状要素があります：

  • 矩形 <rect>
  • 円 <circle>
  • 楕円 <ellipse>
  • 線 <line>
  • 折線 <polyline>
  • ポリゴン <polygon>
  • パス <path>

以下の章では、これらの要素について説明します。まずは矩形要素から始めます。

<rect>タグ

<rect>タグは、矩形や矩形の変種を作成するために使用されます。

これがどのように機能するかを理解するために、これらのコードをノート帳にコピーして「rect1.svg」ファイルとして保存してください。このファイルをwebディレクトリに配置してください：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>

コード説明：

  • rect要素のwidthとheight属性は、矩形の高さと幅を定義できます
  • style属性は、CSS属性を定義するために使用されます
  • CSSのfill属性は、矩形の塗りつぶし色を定義します（rgb値、色名、または16進値）
  • CSSのstroke-width属性は、矩形の枠線の幅を定義します
  • CSSのstroke属性は、矩形の枠線の色を定義します

この例を確認

新しい属性を含む別の例を見てみましょう：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>

例説明：

  • x属性は、矩形の左側の位置を定義します（例えば、x="0"では、矩形がブラウザのウィンドウの左側から0px離れています）
  • y属性は、矩形の上端の位置を定義します（例えば、y="0"では、矩形がブラウザのウィンドウの上端から0px離れています）
  • CSSのfill-opacity属性は、塗りつぶし色の不透明度を定義します（有効な範囲は：0 - 1）
  • CSSのstroke-opacity属性は、筆跡色の不透明度を定義します（有効な範囲は：0 - 1）

例を表示

要素全体に不透明度を定義します：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>

コード説明：

CSSのopacity属性は、要素全体の透明度を定義します（有効な範囲は：0 - 1）

例を表示

最後の例、角付きの矩形を作成する：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>

コード説明：

rx と ry 属性で角を丸めることができます。

例を表示