back
SVGによるベクターグラフィック(1) (4/6)
■共通の属性とグループ化
グラフィックタグには、その図形を作成するのに不可欠な属性が用意されていますが、使える属性はそれだけではありません。各図形に共通する属性というのも用意されています。それらについて整理しておきましょう。
◯色の属性
色に関する属性は、ほぼすべてのグラフィックタグに用意されています。「fill」が内部を塗りつぶした際の色、「stroke」が線分の色になります。これらの色の値は、スタイルシートで用いられる形式で指定されます。以下のような形ですね。
◯線の太さ
輪郭線などの線の太さは「stroke-width」という属性として用意されています。これは位置や大きさなどと同様、数値と単位の組み合わせで指定します。
◯透過度
それぞれの図形では、透過度を指定することができます。これは３つの属性として用意されています。「opacity」が図形全体の透過度を示すもので、通常はこれで図形全体の透過度を設定できます。「fill-opacity」は内部の塗りつぶし部分、「stroke-opacity」は線分の部分のみの透過度で、これらは内部と線分の透過度を別々に設定するのに用いられます。いずれも、０〜１の実数で指定されます。ゼロならば透明となり、１ならば不透明となります。
こうした属性は、それぞれのタグに用意できて便利ではありますが、「いちいちすべてのタグに書かないと適用されない」というのは面倒くさいものですね。そこで、いくつかのタグで同じ設定をする場合、それらをグループ化して設定するためのタグというのが用意されています。<g>タグというもので、以下のように使います。
リストをよくみると、widthやheight、opacityなどもすべて共通の値であることに気づくでしょう。なぜ、これらの値は<g>タグに用意されていないのか。――実は、<g>タグはすべての属性を指定できるわけではないのです。色や線の属性などは行えますが、透過度や位置・大きさといった値は<g>タグで共有することはできません。どういったものが<g>タグで使えるか、それぞれで確認してみるとよいでしょう。
◯色の属性
色に関する属性は、ほぼすべてのグラフィックタグに用意されています。「fill」が内部を塗りつぶした際の色、「stroke」が線分の色になります。これらの色の値は、スタイルシートで用いられる形式で指定されます。以下のような形ですね。
fill="red" stroke="blue"
fill="#FF0000" stroke="#0000FF"
fill="rgb(255,0,0)" stroke="rgb(0,0,255)"
◯線の太さ
輪郭線などの線の太さは「stroke-width」という属性として用意されています。これは位置や大きさなどと同様、数値と単位の組み合わせで指定します。
stroke-width="5px"
◯透過度
それぞれの図形では、透過度を指定することができます。これは３つの属性として用意されています。「opacity」が図形全体の透過度を示すもので、通常はこれで図形全体の透過度を設定できます。「fill-opacity」は内部の塗りつぶし部分、「stroke-opacity」は線分の部分のみの透過度で、これらは内部と線分の透過度を別々に設定するのに用いられます。いずれも、０〜１の実数で指定されます。ゼロならば透明となり、１ならば不透明となります。
opacity="0.5" stroke-opacity="0.75"
fill-opacity="0.25"
■グループで属性を共有する
こうした属性は、それぞれのタグに用意できて便利ではありますが、「いちいちすべてのタグに書かないと適用されない」というのは面倒くさいものですね。そこで、いくつかのタグで同じ設定をする場合、それらをグループ化して設定するためのタグというのが用意されています。<g>タグというもので、以下のように使います。
<g ……設定する属性を用意する……>この<g>タグを用意してあらかじめ属性を指定しておき、その中にグラフィックタグを記述すると、それらのグラフィック全てに<g>タグの属性が適用されます。下のリストに簡単な例を挙げておきましょう。ここでは、fill、stroke、stroke-widthといった項目を<g>タグに用意しています。これにより、描かれたすべての図形で同じ色と線の太さが適用されます。
……ここにタグを書く……
</g>
リストをよくみると、widthやheight、opacityなどもすべて共通の値であることに気づくでしょう。なぜ、これらの値は<g>タグに用意されていないのか。――実は、<g>タグはすべての属性を指定できるわけではないのです。色や線の属性などは行えますが、透過度や位置・大きさといった値は<g>タグで共有することはできません。どういったものが<g>タグで使えるか、それぞれで確認してみるとよいでしょう。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
<?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="300px" height="300px" xmlns="http://www.w3.org/2000/svg"> <g fill="red" stroke="blue" stroke-width="5px"> <rect x="20px" y="20px" width="100px" height="100px" opacity="0.5" /> <rect x="30px" y="60px" width="100px" height="100px" opacity="0.5" /> <rect x="50px" y="90px" width="100px" height="100px" opacity="0.5" /> <rect x="80px" y="110px" width="100px" height="100px" opacity="0.5" /> <rect x="120px" y="120px" width="100px" height="100px" opacity="0.5" /> </g> </svg>
| << 前へ | 次へ >> |