アニメーションテスト

#02 矩形を描画してみよう

rect

rect 要素はSVGの基本図形であり、四角形を生成する際の基準となる座標と、そこからの幅と高さを指定します。また、角の丸まった四角形を作ります。

・単位（pxとか）を付けないでいいみたい
・閉じタグがない場合は/を付ける
・次に書いたソースが上に来る

#03 viewBoxを指定してみよう

viewBox

viewBox は描画領域をどのくらいの座標空間として捉えるかという指定。描画エリアのアスペクト比、およびその中の要素の相対的なサイズを決定する。

・viewBoxで指定できる値：viewBox="x, y, width, height"
・x,yは左上からみたx座標とy座標の位置、そしてwidth,heightは描画エリアの幅(座標値)と高さ(座標値)。
・4つの値は、カンマもしくは半角スペースで区切って使うことができる。

#04 塗りと線のスタイルを指定しよう

fill

塗りを指定。cssと同じ書き方ができる

stroke

線を指定。cssと同じ書き方ができる

stroke-dasharray

点線を指定。線の長さと間隔を指定できる

・塗りとか線の指定は rect だけでなくて、これから見ていく他の図形でも使える

#05 スタイルをまとめて指定しよう

style

塗りとか線のスタイルをstyle属性でまとめて指定

defs

後で再利用できるよう描画オブジェクトを定義します。参照される要素は、可能なかぎりdefs要素内で定義されることが推奨されている。

・アニメーションだとか変形をさせるプロパティを使えば、高度な図形を描くことができる

#06 円や線を描画してみよう

circle

円形を描画する。

line

線を描画する。

・circleで指定できる値： cx="センターのx座標" cy="センターのy座標" r="半径" fill="塗り"
・lineで指定できる値： x1="x座標の始点" y1="y座標の始点" x2="x座標の終点" y2="y座標の終点" stroke="線の色" stroke-width="線の太さ" stroke-linecap="線の端の形状"

#07 CSSアニメーションと連動させよう

gタグ

要素をグループ化できる

・infinite:無限ループ
・alternate：逆向きも再生

#08 ロボットのイラストを描いてみよう

ellipseタグ。

楕円を描写する

polylineタグ

折れ線を描写する。pointsで点の座標をつなぐ

polygonタグ

四角を描写する。pointsで点の座標をつなぐ。終点は自動で始点が指定される。

・ellipseで指定できる値： cx="センターのx座標" cy="センターのy座標" rx="横の半径" ry="縦の半径" その他
・polyline、polygonで指定できる値：points="x座標始点,y座標始点 x座標通過点,y座標通過点 x座標終点,y座標終点"

#09 Pathを使ってみよう

pathタグ。

直線や曲線を描くことができる。実際にはイラレなどからsvgに書き出して使う。（イチから座標を指定して描くことはなさそう）

・pathで指定できる値： d="M（Move to）移動したい座標x,y A（arc）横半径,縦半径回転長い方の円弧か短い方の円弧を0 1で指定　時計回りか反時計回りかを0 1で指定　終点座標x,y z（最後にパスを閉じる）" cy="センターのy座標" rx="横の半径" ry="縦の半径" その他

#10 シンボルを定義してみよう

symbolタグ。

部品化して再利用する。defsタグの中に記載

useタグ。

symbolタグで定義した部品を配置する

・symbolで指定できる値： id="" viewBox="" その他
・useで指定できる値： href="id" x="" y="" width="" height="" その他

#11 シンボルのスタイルを上書きしよう

・symbol内で変更＝一括変更

#12 テキストを描画してみよう

textタグ。

テキストを描画する。

・クラスを付けてstyleでcssライクに編集する。
・x, y 属性で位置を指定していきますが、 y はテキストのベースラインの座標ということに注意。
・xの位置はデフォルトではテキストの開始位置。
・センター揃え（真ん中の座標を指定したい場合）。：描画範囲の真ん中の座標をxに与えつつ、text-anchor="middle"を指定。

#13 テキストをアニメーションしてみよう

・stroke-dasharrayとstroke-dashoffsetを組み合わせたアニメーションで、線が描写されるアニメーション。

#14 SVGとJavaScriptを連携させてみよう

・クラスを付けてstyleでcssライクに編集する。