SVG 長方形
SVG シェイプ
SVG には、開発者が使用および操作できる事前定義されたシェイプ要素がいくつかあります。 se<楕円>
-
line<line>
polyline<polyline>
polygon<polygon>
path<path>
以下の章で説明します。長方形要素を使用します。
- SVG Rectangle - <rect>例 1
- <rect> タグは、長方形だけでなく、長方形のバリアントも作成するために使用できます: SVG コードは次のとおりです:
Example
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" /> </svg> </body> </html>
サンプルを実行する »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
Opera ユーザーの場合: SVG ファイルを表示します (SVG グラフィック プレビュー ソースを右クリックします)。CSS のストローク幅プロパティは、長方形の境界線の幅を定義します
CSS のストロークプロパティは、長方形の境界線の色を定義します
- 例 2
- Let いくつかの新しいプロパティを含む別の例を見てみましょう: SVG コードは次のとおりです:
Instance
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" /> </svg> </body> </html>
コード分析:
x 属性は、長方形の左の位置を定義します (たとえば、x="0" は、長方形からブラウザ ウィンドウの左側までの距離を 0px として定義します) y 属性は、長方形の上部の位置を定義します (たとえば、 y="0" は、長方形からブラウザ ウィンドウの上部までの距離が 0px であることを定義します)
CSS の fill-opacity 属性は、塗りつぶしの色の透明度を定義します (有効な範囲は: 0 - 1)
CSS ストロークの不透明度属性は、ストロークの色の不透明度を定義します (有効な範囲は: 0 - 1)
例 3
- 要素全体の不透明度を定義します: SVG コードは次のとおりです:
例
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" /> </svg> </body> </html>
Opera ユーザーの場合: SVG ファイルを表示します (SVG グラフィック プレビュー ソースを右クリックします)。
CSS の不透明度プロパティは、要素の透明度の値を定義します (範囲: 0 ～ 1)。
例 4
最後の例、角丸長方形を作成します:
SVG コードは次のとおりです:
Example
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> </svg> </body> </html>
インスタンスの実行»
「インスタンスの実行」ボタンをクリックして表示しますのオンライン例
Opera ユーザーの場合: SVG ファイルを表示します (SVG グラフィック プレビュー ソースを右クリックします)。
rx 属性と ry 属性を使用すると、長方形の角を丸くすることができます。
