tomo.mobi

Representation design of material


SVGについて

SVGのアニメーションをやってみようと試みる。
まずは、svgについて知らなくてはなのです。

以下のサイトで勉強させて頂きました。
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo.htm←pdf版もある!

avgの描画部分。
自由なパスが引ける為にはのd属性に指示子でコマンドを知る必要があるとおもう。
丸や四角等のパスに関してはに比べればそれほど難しい記述ではないです。

指示子の大文字と小文字には意味があります。
例:A(絶対), a(相対)※d属性”楕円弧曲線命令”の場合。
大文字が絶対値で小文字は相対値です。

また、描画させる値の設定にはいくつか決まりがあります。
それは、画像の形により違うのですが、同じパス内で始点と終点は同じ座標は指定できないようです。同じ座標を指定しても描画できませんでした。閉じるコマンドがあるので、閉じる時は”z”を指定です。

特に慣れていない自分用に、見ただけではよく意味が分からなかったコマンドに関してのみメモとして細かい設定内容を記述します。もう少し勉強が進んだら増やすかも?
名称未設定-1
** 円を角場合の指定について
(rx ry x-axis-rotation large-arc-flag sweep-flag x y)の内容をd属性に設定

** x-axis-rotationについて
名称未設定-2
どのぐらいx軸回転されるかを設定。

** large-arc-flag sweep-flagについて
以下の図がとても分かりやすい。始点と終点が決まっている重なり合った円の場合4とおりの接続方法がある。どの方法でつながるかを指定できる。
参考文献:http://www.hcn.zaq.ne.jp/___/SVG11-2nd/images/paths/arcs02.svg
スクリーンショット 2015-10-14 9.20.01