- 2008年7月12日 17:31
- Rect element
Rectangle element(四角形要素)で描く
rect 要素を使った面白いデザインの形を描いてみたいと思います。
rectangle element の属性(attribute)は、x, y, width, height の4つの基本属性に、 rx, ry のオプショナル属性があります。
x = X軸（Rectangle の左上のコーナーの位置）
y = Y軸（Rectangle の左上のコーナーの位置）
width = Rectangle の幅
height = Rectangle の高さ
rx = Rectangle のX軸の丸み(optional attribute)
ry = Rectangle のY軸の丸み(optional attribute)
W3Cで標準化されている要素、スタイル属性がサポートされているブラウザ、またはSVG Viewerプラグインをインストールしてください。
左の2つのRectangles は、Line 要素やCircle 要素のページで説明したようにストロークをstroke-dasharray で間隔を入れる方法で描いています。
3番目のRectangleは、2つのrectangle を描いています。両方ともFill の色はなしで、青と黒のストロークをstroke-dasharrayを使って描いています。右のRectangleは同じように3つ描いています。一見、とても複雑な模様に見えますがコード自体はとても小さいです。
色の名称はこちらを参考：Name, Hex, RGB of Color
下のコードは、Fill の色を transparent とCSSのように透明設定することも出来ます。これはFill="none"と同じです。stroke の色の初期値はありませんので色を指定しないときはストロークの色はありません。
下のコードは上のSVGファイルのコードです。
