LSSさんのブログを参考にsvgを試してみました。
恥ずかしながら、今までsvgはなんなのかを知りませんでした。
Scalable Vector Graphicsの略で、テキスト形式でお絵かきができるものです。
まず、最初にLSSさんのソースを丸パクリしたものはこちらです。
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400" viewbox="0 0 300 400">
<rect x="0" y="0" width="300" height="400" fill="lightblue"></rect>
<circle cx="230" cy="70" r="40" fill="red"></circle>
<rect x="0" y="300" width="300" height="100" fill="yellowgreen"></rect>
</svg>
次に真似をしてもう一つ青い丸を書いてみました。
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400" viewbox="0 0 300 400">
<rect x="0" y="0" width="300" height="400" fill="lightblue"></rect>
<circle cx="230" cy="70" r="40" fill="red"></circle>
<rect x="0" y="300" width="300" height="100" fill="yellowgreen"></rect>
<circle cx="270" cy="150" r="100" fill="blue"></circle>
</svg>
ちなみに、circleは丸で、rectは長方形を指すrectangleの省略です。
描画範囲から飛び出た部分はもちろん描画されないということを併せて確認しました。
ここで気になったのは青色の丸が最前面に表示されたこと。
もしかしたら記述順によって描画され、下に書くと前面に出てくるのかなと思い、赤丸の記述を下に移動してみました。
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400" viewbox="0 0 300 400">
<rect x="0" y="0" width="300" height="400" fill="lightblue"></rect>
<rect x="0" y="300" width="300" height="100" fill="yellowgreen"></rect>
<circle cx="270" cy="150" r="100" fill="blue"></circle>
<circle cx="230" cy="70" r="40" fill="red"></circle>
</svg>
想定通り！
次に、描画範囲を広げてみます。
青丸はしっかり表示されるのか？
何も定義していないデフォルトの背景色はなんなのか？
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="500" viewbox="0 0 400 500">
<rect x="0" y="0" width="300" height="400" fill="lightblue"></rect>
<rect x="0" y="300" width="300" height="100" fill="yellowgreen"></rect>
<circle cx="270" cy="150" r="100" fill="blue"></circle>
<circle cx="230" cy="70" r="40" fill="red"></circle>
</svg>
描画範囲を300×400から400×500に変えたところ結構スカスカ感がでてきました。
背景色は、、、白かな？透過かな？
ここまでは手探りで色々とやったのですが、他にもどんな絵をかけるのか、ちょこっとググって試してみました。
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="500" viewbox="0 0 400 500">
<rect x="0" y="0" width="300" height="400" fill="lightblue"></rect>
<rect x="0" y="300" width="300" height="100" fill="yellowgreen"></rect>
<circle cx="270" cy="150" r="100" fill="blue"></circle>
<circle cx="230" cy="70" r="40" fill="red"></circle>
<ellipse cx="80" cy="450" rx="100" ry="50" fill="orange"></ellipse>
<line x1="100" y1="500" x2="500" y2="0" stroke="black" stroke-width="15"></line>
<polyline fill="lime" stroke="red" stroke-width="3" points="200,490 480,470 270,450 440,430 300,410 420,390 330,370 380,350 360,330"></polyline>
<polygon fill="yellow" stroke="white" stroke-width="5" points="0,190 180,170 170,150 0,130 200,110 120,90 130,70 80,50 160,30"></polygon>
</svg>
楕円、線、折れ線、図形を描いてみました。
楕円はcx,cyで中心位置を指定し、rxとxyで縦横方向の範囲を指定します。
線はx1,y1で始点、x2,y2で終点を指定し、stroke-widthで線の太さを指定します。
折れ線と図形は似ていて、頂点をいくつも指定するとその点を繋ぐように線を結んでくれます。
折れ線と図形の差は最後に終点から始点を結んでくれることくらいでしょうか？？
テキスト形式でお絵かきができるため、つい色々と触ってしまいました。
今後、svgで描いたものをcssやJavaScriptで操作できたら面白そうですね！
