externalResourcesRequired

Scalable Vector Graphics等,不定期

d

2006-09-22 | 仕様
path要素のd属性はアニメーションの対象です。

d属性を変化させることにより、図形の形を時間とともに変えることができますが、補間を伴う場合には制限があります。
補間を伴うアニメーションは、アニメーションによって指定されるパスデータの値を正規化したものを構成するコマンドとアニメーションの対象であるpath要素のd属性の値を正規化したものを構成するコマンドが完全に一致している場合だけ動作します。完全に一致していない場合は、そのアニメーションは無視されます。

例えば、
d="M10,10L100,100"

d="M10,10L200,200"
に変化させるアニメーションは、値を構成するコマンドが共にM、Lなので動作しますが、
d="M10,10L100,100"

d="M10,10L100,100L200,200"
に変化させるアニメーションは、無視されます。

パスデータの正規化は、
相対座標をパラメータとするコマンドを絶対座標をパラメータとするコマンドに置き換える
水平線と垂直線を描くコマンドをまっすぐな線を描くコマンドに置き換える
SコマンドをCコマンドで置き換える
TコマンドをCコマンドで置き換える
QコマンドをCコマンドで置き換える
ことにより、行われます。
(TおよびQコマンドをCコマンドで置き換えるのは、2次ベジエ曲線を3次ベジエ曲線で置き換えることになるのですが、どうやるのだろう)

例えば、
d="M10,10h90"
は、正規化をすることによって
d="M10,10L100,10"
になります。
したがって、
d="M10,10h90"

d="M10,10L100,100"
に変化させるアニメーションは動作します。

補間を伴わない場合には制限はありません。