削除された内容 追加された内容
動画SVG
435 行
<svg x="0" y="0" width="400" height="200" style="background-color: #bbbbff" >
<rect x="10" y="40" width="50" height="50" fill="white" stroke="black" stroke-width="3">
<animate attributeName="x" from="10" to="300" dur="4s5s" repeatCount="indefinite" >
</rect>
</svg>
448 行
自分でコードを書いた際、もし静止してしまって動かない場合には、よくあるミスですが、開始タグのつもりが末尾に<code>/</code>などがついて終了タグになっていないか、点検してください。(静止SVG図形用のコードをコピーしたときに、よくやるミスです。)
 
 
動画のスピードは入力せず、入力するのは初期値と最終値および、1回の描画あたりの時間(単位は秒数)を入力すると、SVGが代わりに適切なスピードを選択して、動画の描画を実行します。
 
 
;attributeName
:どの属性を変動させるかの指定。
 
;from
:attributeNameで指定した属性の初期値。単位はpx(ピクセル)。単位を明治したい場合には「px」をつける。
 
;to
:attributeNameで指定した属性の最終値。単位はpx。(fromと同様)
 
;dur
:1回の描画あたりの秒数。単位をつけないと、単位が秒になる。秒であることを明示したい場合には「s」をつける。
;repeatCount
:繰り返しの回数。無限に繰り返したい場合には値を "indefinite" に指定する。
 
 
なお、durを3秒以下にすると、人間の目では、見るのが疲れます。なので閲覧者の安全のため4秒以上にすると良いでしょう。
 
== 参考文献 ==