削除された内容 追加された内容
→‎ブラウザでの外部ファイル表示: edge の動作確認の反映。
動画SVG
209 行
;height
:縦幅
 
 
rextの山カッコ内の最後に、下記のように<code>/</code>が必要です。(下記コードの場合、 stroke-width="5" の次の部分。 )
 
<syntaxhighlight lang="xml">
<rect x="1" y="1" width="100" height="100"
fill="#FFFFFF" stroke="#000000" stroke-width="5" />
</syntaxhighlight>
 
もし、この<code>/</code>が終わりに無いと、認識せずに、エラーになり、非表示になります。(長方形以外の、円や線分など他の静止図形のタグでも同様、最後に「/」が必要です。)
 
 
418 ⟶ 428行目:
 
また、textタグの文字列も同様に、この方法で回転が可能です。
 
== 動画 ==
次のコードは、水色の背景の上に、四角を水平方向に移動させます。
 
<syntaxhighlight lang="xml">
<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="4s" repeatCount="indefinite" >
</rect>
</svg>
</syntaxhighlight>
 
まず、移動させたい対象物に対応する開始タグと終了タグの間に、<code><animate></code>タグを入れます。
 
上記の場合、四角形を移動させたいので、<code><rect></code>タグおよび<code></rect></code>の間に、<code><animate></code>タグを入れることになります。
 
また、前提として動画SVG図形の場合、開始タグと終了タグを両方とも用意しないといけません。(一方、動画でない静止画を書くだけなら、タグは終了タグ1個でなければならない。)
 
自分でコードを書いた際、もし静止してしまって動かない場合には、よくあるミスですが、開始タグのつもりが末尾に<code>/</code>などがついて終了タグになっていないか、点検してください。(静止SVG図形用のコードをコピーしたときに、よくやるミスです。)
 
 
== 参考文献 ==
425 ⟶ 455行目:
* [http://www.adobe.com/jp/svg/ AdobeのSVGサイト]
* [https://developer.mozilla.org/ja/Mozilla_SVG_Project Mozilla SVG Project - MDC]
 
== 脚注 ==
{{stub}}