「SVG」の版間の差分
削除された内容 追加された内容
回転の動画 |
|||
430 行
== 動画 ==
SVGの動画を実行または閲覧するには、webブラウザで実行・閲覧を行ってください。Firefox, Google Chrome, Microsoft Edge はSVG動画にも対応しています。
一方、Inkscapeでは動画は無効化され、静止画しか表示されません。
=== 基本 ===
次のコードは、水色の背景の上に、四角を水平方向に移動させます。
452 ⟶ 456行目:
動画のスピードは入力せず、入力するのは初期値と最終値および、1回の描画あたりの時間（単位は秒数）を入力すると、SVGが代わりに適切なスピードを選択して、動画の描画を実行します。
回転の方向の正負（プラスマイナス）は、時計回り（右回り）が正・プラスです。
;attributeName
469 ⟶ 475行目:
なお、durを3秒以下にすると、人間の目では、見るのが疲れます。なので閲覧者の安全のため4秒以上にすると良いでしょう。
SVGでいう回転は、数学でいう線形変換の回転行列に近いですが( [[高等学校数学C/行列]] )、しかし方向が数学とは違い、SVGでは時計回り（右回り）がプラスの方向になっている事に気をつけてください。
=== 斜め移動 ===
521 ⟶ 529行目:
attributeName="transform"
も、今のところ、どのブラウザでも絶対に必要です。（おそらく実装の都合もあるのでしょう。）
=== 回転の動画 ===
<!-- 静止画の単元にも「回転」の単元があるので、区別のため、こちらではタイトルに「動画」を入れています。 -->
SVG動画で回転をさせたい場合<code>animateTransform</code>タグ および 属性 <code>attributeName="transform"</code>を使うことに加えて、
: <code> type="rotate" </code>
を指定します。type属性は transalateではなくrotate です。"translate" とは数学の用語で「平行移動」という意味ですので、もし回転させたい場合には translate は不適切です。
"Transform"(変形、変身)と "translate"(平行移動、並進) は意味が違うので、混同しないように注意してください。
SVGでは行列計算によって、図形を縦長にしたり横長にしたりなどの変形を行えますが、回転も行列計算で行っているためか、SVGでは回転は"Transform"(変形、変身)に分類されます。
;仕様
<code> from </code> 属性で、開始時の角度と座標位置を指定します。
: <code> from="0 60,90" </code> なら、「角度0度から開始で、座標位置は<code>(x=60,y=90)</code>の位置」という指定です。
rotateの場合のfromの書式は <code> from="角度 x座標,y座標" </code> です。
同様に、 <code> to </code> 属性で、終了時の角度と座標位置を指定します。
rotateの場合のtoの書式は <code> to="角度 x座標,y座標" </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="rotate"
from="0 60,90" to="180 60,90"
dur="5s" repeatCount="indefinite"
>
</rect>
</svg>
</syntaxhighlight>
;解説
from や to のx座標とy座標は省略できますが、その場合、原点 (0,0) が回転の中心になります。
from や to を使わずにvalue で回転の方法を指定する事もできますが、回転の場合にfromとtoを使わないと集団作業でのメンテナンスがしづらくなる可能性があるので、なるべく from や to で記述しましょう。
SVGでいう回転は、数学でいう線形変換の回転行列に近いですが( [[高等学校数学C/行列]] )、しかし方向が数学とは違い、SVGでは時計回り（右回り）がプラスの方向になっている事に気をつけてください。
SVGのrotateは回転行列の一種なので、回転の際には一般に、自転とともに公転をしてしまいます。
もし、「公転だけをさせたい」という場合には、<code>anmateMotion</code>を使うことで、パスにそった平行移動が可能なので、それを流用して公転を命令できます。
== 参考文献 ==
| |||