SVGの基礎 3
fillやstrokeなどの属性とCSS
fillやstrokeなどの属性パラメータはこれまで何の説明もなしに使ってきた。 図形内部の塗りつぶしや線の色や幅などの描いた図形に属性を与える方法をここで解説する。 属性はCSSでも設定できるようになっており、 HTML,CSS,SVGの3者を活用して効率よくHTMLページを作成できる。
<path d="M20,30 Q40,5 50,30 T90,30" fill="none" stroke="blue" stroke-width="10" />
</svg>
上記を記述すると、以下のように表示される。
これを以下のようにCSSを使って書き換えても同じ結果を得る。
<path d="M20,30 Q40,5 50,30 T90,30" style="fill:none; stroke:blue; stroke-width:10;" />
</svg>
もちろん、インライン指定以外のエンベット指定やリンク指定も活用でき、hover機能などの高度なCSSの活用も可能である。
ところで、HTML内のSVGでは、xmlns="http://www.w3.org/2000/svg"は省略できる。 ここではおまじないの意味で書いているが、文字数が増えるだけなので今後は省略することにする。
fill属性
fill="green" などと色を指定する。 その他に、fill="transparent"とすると透明色、fill="none"とすると塗りつぶしをしない意味になる。 fillを省略した場合、fill="black"が指定されたものと見なされる。
fill-opacity
fill-opacityを設定すると、不透明度を指定できる。0から１の範囲で指定する。％指定もできる。 上で利用した図を再利用し、以下のように一部変更する。
<path d="M20,30 Q40,5 50,30 T90,30" style="fill:blue; fill-opacity:0.2; stroke:blue; stroke-width:10;" />
</svg>
fill-opacityを0.2、0.5、0.8と変えていくと、以下のように塗りつぶし領域が青に変わっていくのがわかる。
paint-order
少し見にくいので、paint-orderを使って描画の順番を変えてみることにする。 paint-order="stroke"とすると順番が変わる。規定値はpaint-order="fill"となっている。 省略時は塗りつぶしをしてから線（ストローク）を描くが、 線を描いてから塗りつぶしをすると塗りつぶしが前面に出てくる。 同時に、より見やすくなるよう色の変更も行った。
fill-rule
fill-ruleは"nonzero"と"evenodd"の２つのパラメータがある。 nonzeroは規定値で、指定しなければnonzeroが採用され、内側の図形は全て塗りつぶされる。 evenoddが指定されると、図が入れ子になっている場合は交互に塗りつぶすようになる。 具体例は以下のとおりである。
左が通常の場合(fill-rule="nonzero")、右がfill-rule="evenodd"になっている場合である。 星形図形の中に正五角形があり、五角形の中は塗りつぶされないようになる。
fillのその他の活用
fillにはグラデーションやアニメーションでの活用がある。 ここでの説明は割愛する。それぞれの項目で解説する。
stroke属性
stroke属性は線の色(stroke=red)や幅指定(stroke-width="10")以外に多くの属性がある。
stroke-linecap
stroke-linecap="square"
stroke-linecap="round"
上図はそれぞれ、 stroke-linecap="butt","square","round" としたときの線分の表示である。
stroke-linejoin
線分の結合部分の形状は、以下のようになる。
stroke-linejoin="round"
stroke-linejoin="bevel"
stroke-dasharray
stroke-dasharrayを設定すると、下図のように破線が描ける。 下図の5つの破線は、それぞれ上から、stroke-dasharray="4", "4 1", "4 1 2", "4 1 2 3", "0 4 1 2 3 0"とした。
順番に線、空白、線、空白の順に指定サイズが割り当てられる。 ="0 4 ... 0"と0から開始 0で終了すると空白スタートとなり、 最初と最後の0は無視して繰り返される。 データが3以上の奇数の場合は、実線開始パターンが途中で空白開始パターンと入れ替わるので、 パターンが複雑化する。
なお、データ1個の場合、例えば ="4" は ="4 4" とした場合と同じになる。 また、奇数の場合、="2 5 3" は、2回繰り返しの ="2 5 3 2 5 3" の偶数データと同じになる。
グラデーション
グラデーションには線形グラデーションと放射グラデーションがある。 ここでは線形グラデーションだけ簡単に説明する。詳しい解説はMDNにあるのでそこを参照してもらいたい。
<defs>
<linearGradient id="Gradient0" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</linearGradient>
</defs>
<rect x="10" y="20" rx="15" ry="15" width="100" height="100" fill="url(#Gradient0)" />
</svg>
実行すると以下のように表示される。
<defs>
<defs>がここではじめて出てきた。 定義文がここに記述され、外部からの呼び出しで実行される。id名で外部から呼び出される。 fill="url(#id名)"で呼び出すと、グラデーションが表示される。 参考： SVGにおけるグラデーション
パターン pattern
パターン<pattern>要素を使うと、同じ図形を繰り返し表示できる。
<defs>
<linearGradient id="Gradient1">
<stop offset="5%" stop-color="white" />
<stop offset="95%" stop-color="blue" />
</linearGradient>
<linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
<stop offset="5%" stop-color="red" />
<stop offset="95%" stop-color="orange" />
</linearGradient>
<pattern id="Pattern" x="0" y="0" width=".25" height=".25">
<rect x="0" y="0" width="50" height="50" fill="skyblue" />
<rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)" />
<circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5" />
</pattern>
</defs>
<rect fill="url(#Pattern)" stroke="black" width="200" height="200" />
</svg>
を実行すると、
テキスト
<rect x="0" y="0" width="500" height="110" fill="none" stroke="black"/>
<text x="30" y="20">今日はいい天気ですね。</text>
<text style="fill:#3a3a3a;" x="30" y="50">今日はいい天気ですね。</text>
<text style="fill:red; stroke:black; font-size:40px;" x="30" y="100">
今日はいい天気ですね。</text>
</svg>
を実行すると、
と表示される。
一番目の文字列から、フォントや文字サイズはhtmlから継承されているが、 文字色は継承されておらず、blackが設定されていることがわかる。 二番目の文字列は、htmlで設定されている色をfillで設定したものであり、 一番目との比較のために表示したものである。 3番目の文字列は、fillとstrokeの関係を示したものであり、 strokeは文字の輪郭を描き、fillは内部を塗りつぶす。
tspan
テキストの一部に属性を与えるhtmlの<span>....</span>と同じ働きをする。 textタグ内でしか利用されない。
<rect x="0" y="0" width="500" height="30" fill="none" stroke="black"/>
<text x="30" y="20">今日は<tspan font-weight="bold" fill="red">いい天気</tspan>ですね。</text>
</svg>
とすると、
tspan 要素には、カスタム属性として、x,y,dx,dy,rotate,textLengthがある。 rotateを使って以下のように文字の回転ができる。詳細は他を参照。
textPath
pathとの組み合わせで、文字列を変形することができる。 1.3.1 pathのところの3次元ベジェ曲線の例にidを付けて流用し、href属性で参照すると、
<path id="my_Path" d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"
fill="none" stroke="transparent" />
<text>
<textPath xmlns:xlink="http://www.w3.org/1999/xlink" href="#my_Path">
今日はいい天気ですね。明日はどう？
</textPath>
</text>
</svg>
stroke="transparent"を"black"に変更すると、右のようになる。 描かれた曲線のどの位置に文字が書かれるかこれでわかる。 なお、xmlns:xlink="http://www.w3.org/1999/xlink"は省略しても動作するようである。
作成日: 更新日: