「SVG」の版間の差分
削除された内容 追加された内容
表記の修正 |
→動画: 斜め移動の方法 |
||
430 行
== 動画 ==
=== 基本 ===
次のコードは、水色の背景の上に、四角を水平方向に移動させます。
468 ⟶ 469行目:
なお、durを3秒以下にすると、人間の目では、見るのが疲れます。なので閲覧者の安全のため4秒以上にすると良いでしょう。
=== 斜め移動 ===
前の節の方法では、上下方向または水平方向にしか、移動できないです。
斜めに移動するには、<code>animateTransform</code> および <code>type="translatetranslate</code>を使います。
<syntaxhighlight lang="xml">
<svg x="0" y="0" width="400" height="200" style="background-color: #bbbbff" >
<rect x="10px" y="40px" width="50" height="50" fill="white" stroke="black" stroke-width="3">
<animateTransform
attributeName="transform"
attributeType="XML"
type="translate"
dur="5s" repeatCount="indefinite"
values="0,0; 100,50; 200,0"
/>
</rect>
</svg>
</syntaxhighlight>
;解説
<code>animateTransform</code> は平行移動の他にも回転も扱います。<code>type</code.属性によって、平行移動か回転かの区別をします。
図形の移動の軌跡の指定方法は、<code>value</code>属性による相対座標で表します。上記コードの場合の
values="0,0; 100,50; 200,0"
は、rectタグの座標を起点とした相対座標です。
上記コードの場合、
:相対座標(0, 0) → 相対座標(100, 50) → 相対座標(200, 0)
というふうに3点の間をこの順番で移動していきます。
起点の絶対座標が(10,40)ですので、絶対座標に換算すると、
:絶対座標(10, 40) → 絶対座標(110, 90) → 絶対座標(210, 40)
というふうに3点の間をこの順番で移動していきます。
このように<code>value</code>属性で指定する点は3点以上でも構いません。
他の属性については、ブラウザによっては
attributeType="XML"
を省略できます。
しかし、
type="translate"
は移動の種類を決定するので、絶対に必要です。（実際、ここを削ると、ブラウザでは動画として動作しなくなります。）
attributeName="transform"
も、今のところ、どのブラウザでも絶対に必要です。（おそらく実装の都合もあるのでしょう。）
== 参考文献 ==
| |||