SVG Examples

    

<rect> 四角形
●移動/フェイドイン/回転




		


<svg>
<rect id="rect1"
style="fill:green" rx="10" ry="10"
x="100" y="100" width="100" height="100">

<!--移動-->
<animate attributeName="x" attributeType="XML"
begin="0s" dur="5s" fill="freeze" from="200" to="0" />
<animate attributeName="y" attributeType="XML"
begin="0s" dur="5s" fill="freeze" from="200" to="0" />

<!--フェイドイン-->
<animate attributeName="opacity" attributeType="CSS"
from="0" to="1" dur="5s" repeatCount="0" />

<!--回転-->
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="-90" to="0"
dur="2s" fill="freeze" />

</rect>
</svg>
<text> 文字列
●フェイドイン/回転




		


<svg>
<text id="text1"
style="fill:lightblue;font-size:100px;opacity:0.3"
x="50" y="100"> SVG

<!--フェイドイン-->
<animate attributeType="CSS" attributeName="opacity"
begin="5s" from="0.3" to="1" dur="1s" repeatCount="0" fill="freeze" />

<!--回転-->
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="-90" to="0"
dur="5s" fill="freeze" />

</text>
</svg>
<circle> 円
●移動/拡大




		


<svg>
<circle id="circle1"
style="fill:pink;opacity:0.3"
cx="50" cy="50" r="30">

<!--サイズ変更-->
<animateTransform attributeName="transform"
type="scale"
values="1 1 ; 3 3 ; 1 1"
additive="sum"
dur="3"
repeatDur="indefinite"/>

</circle>
</svg>

Toshirou Takahashi tato@fureai.or.jp