今回はSVGで様々な直線を描画する方法を解説します・・・
線が描けるだけでもデザインの幅が広がるね！
今回も参考図書は「Webで使える!SVGファーストガイド」です。
基本的な直線の描画の仕方
直線を描画するのはline要素で、始点と終点のｘ、ｙ座標を指定して表すことができます。
書き方は
<line x1=”数値” y1=”数値” x2=”数値” y2=”数値” />
x1 y1が始点、x2 y2が終点です。
これだけだと線に色がついていませんので、これに線の色のstroke要素を指定しましょう。
線の色 stroke=”色”
色の部分には色のコードか、色名、rgbの値などをいれます。
線の幅 stroke-width=”太さ”
線幅要素を指定することで線の太さも変えることができます。太さには数値をいれてください。
以下デモ画面です。
See the Pen line-demo by inu (@tenp) on CodePen.
線端の形状の違いですが
butt … 線の端で切り落とし
round … 線の端を中心に半円が描かれる
square … 線の端を中心に正方形が描かれる
というようになっています。
点線の描画
次は点線の描画です。
stroke-dasharray要素に「線分の長さ」と「間隔の長さ」をカンマで区切って指定します。
点線 stroke-dasharray=”線分の長さ,間隔の長さ”
二種類の線分を使って装飾的な点線を作ることもできます。カンマで区切って二種類目の点線の長さを指定することで描画できます。（間隔の長さは一種類目の間隔の長さと同一のものを入れてください。）
二種類の線分で作る点線
stroke-dasharray=”線分の長さ,間隔の長さ,二種類目の線分の長さ,間隔の長さ“
また、線端をstroke-linecap=”round”にしておくと、丸いドットの点線を作ることも可能です。roundで先を丸めた場合、線の長さより少し長くなってしまうので、間隔の長さをその分伸ばす必要があります。線の長さを0にして線の端を丸くした場合、正円のドットの点線ができますが、ブラウザによっては表示されなくなる場合があるので、正円ドット点線を作りたい場合は線の長さを“0.01”等わずかに数値を入れることが必要です。
点線の開始位置も指定できます。
点線の開始位置 stroke-dashoffset=”開始位置をずらす長さ”
また、stroke-opacityで線の透明度を指定することができます。
線の透明度 stroke-opacity=”0～1.0の不透明度の数値”
この数値は、0が完全に透明、0.5が半透明、1.0が完全に不透明です。
以下デモ画面です。
コメント