- 2008年7月14日 09:08
- Group emement
Group element(グループ要素)と Use element (Use 要素) を利用する
Group 要素は描いた図形をグループ化する役割があります。 Use 要素は、ID を持つ各オブジェクトを xlink:href 属性を使ってリンクによって何度でも使うことができます。これらの2つの要素は構造的に重要な役割を持ち、とても便利なので頻繁に使われます。
<use xlink="ID" .... />
W3Cで標準化されている要素、スタイル属性がサポートされているブラウザ、またはSVG Viewerプラグインをインストールしてください。(FireFoxでは、現時点ではstroke-dasharray がサポートされていないようなので円のストロークが丸い状態になります。）
左側の3つの円と四角の図形は、Group 要素を使ってグループ内のオブジェクトにスタイル属性を指定して描写しています。グループ内のスタイル属性の各プロパティ値を Fill:navy;や Fill-opacity:0.3; というように指定しても、図形で fill:red;fill-opacity:1 と指定されるとこちらが優先されます。右の2種類の顔のオブジェクトは<defs> で定義しているオブジェクトのID を指定して、use xlink:href でリンクさせて描写したものです。各図形にID を設定してますので、必要に応じて別々にリンクさせることも出来ます。use 要素で設定する x, y はリンクさせるオブジェクトのx, y 属性で指定したオリジナルの位置からの移動させる値になります。
IEで、Adobe SVG Viewer をインストールしてあれば、Altキーを押したまま上の画面をマウスでドラッグすれば動きます。また、Ctrlキーを押してクリックでズームイン、Ctrl + Shift キーを押してクリックするとズームアウトすることができます。
色の名称はこちらを参考：Name, Hex, RGB of Color
下のコードは上のSVGファイルのコードです。
