SVG Examples
    

tips0012.zip
---


Adobe SVG Viewer
* Adobe SVG Viewer CD-ROM からダウンロード
* Adobe SVG Viewer Webからダウンロード
* Adobe SVG Viewer Web (us )からダウンロード

<その1> 

まず、transform="translate(200,200)"で左から200px、上から200pxの場所へ、style="font-size:70px;color:lightblue"でフォントサイズ70pxで色がlightblueの「SVG」という文字を表示する。

サンプル
		
<?xml version="1.0" ?>

<svg>

  <g transform="translate(200,200)">
    <text style="font-size:70px;color:lightblue">
    SVG
    </text>
  </g>

</svg>

		
<その2> 

次にtransform="skewX(10)"でX軸方向へ10度歪めてみる。

サンプル
		
<?xml version="1.0" ?>

<svg>

  <g transform="translate(200,200)">
    <g transform="skewX(10)">
      <text style="font-size:70px;color:lightblue">
      SVG
      </text> 
    </g>
  </g>

</svg>

		
<その3> 

次にtransform="skewY(40)"でY軸方向へも40度歪めてみる。
サンプル
		
<?xml version="1.0" ?>

<svg>

  <g transform="translate(200,200)">
    <g transform="skewX(10)">
      <g transform="skewY(40)">
        <text style="font-size:70px;color:lightblue">
        SVG
        </text> 
      </g>    
    </g>
  </g>

</svg>

		
<その4> 

次にanimateTransformのtype="rotate"で回転させる。

サンプル
		
<?xml version="1.0" ?>

<svg>

  <g transform="translate(200,200)">
    <g transform="skewX(10)">
      <g transform="skewY(40)">
      
        <text style="font-size:70px;color:lightblue">
        
          <!--回転-->
          <animateTransform attributeName="transform" 
                           type="rotate" 
                           values="0;360" 
                           dur="1s" 
                           repeatDur="indefinite"/>
                           
         SVG
        </text>
      </g>    
    </g>
  </g>

</svg>

		
<その5> 

次に E x a m p l e の文字列を追加して動かす。


サンプル
		
<?xml version="1.0" ?>

<svg>

  <!--SVG回転-->
  <g transform="translate(200,200)">
    <g transform="skewX(10)">
      <g transform="skewY(40)">
      
        <text style="font-size:70px;color:lightblue">
        
          <!--回転-->
          <animateTransform attributeName="transform" 
                           type="rotate" 
                           values="0;360" 
                           dur="1s" 
                           repeatDur="indefinite"/>
                           
         SVG
        </text>
      </g>    
    </g>
  </g>

  <!--Example移動-->
	<g transform="translate(250,240)">
		<!--移動e-->
		<text
		     d="TextElement2" x="-500" y="0"
		     style="font-family:Arial; font-size:30px;color:#000000" > 
				 e
			<animate attributeName="x" attributeType="XML" 
	             begin="1s" dur="1s" fill="freeze" from="-220" to="40" />
		</text>
		
		<!--移動l-->
		<text
		     d="TextElement2" x="-500" y="0"
		     style="font-family:Arial; font-size:30px;color:#000000" > 
				 l
			<!--移動-->
			<animate attributeName="x" attributeType="XML" 
	          begin="2s" dur="1s" fill="freeze" from="-220" to="25" />
		</text>

		<!--移動p-->
		<text
		     d="TextElement2" x="-500" y="0"
		     style="font-family:Arial; font-size:30px;color:#000000" > 
				 p
			<animate attributeName="x" attributeType="XML" 
	          begin="3s" dur="1s" fill="freeze" from="-220" to="0" />
		</text>
		
		<!--移動m-->
		<text
		     d="TextElement2" x="-500" y="0"
		     style="font-family:Arial; font-size:30px;color:#000000" > 
				 m
			<animate attributeName="x" attributeType="XML" 
	          begin="4s" dur="1s" fill="freeze" from="-220" to="-30" />
		</text>
		
		<!--移動a-->
		<text
		     d="TextElement2" x="-500" y="0"
		     style="font-family:Arial; font-size:30px;color:#000000" > 
				 a
			<animate attributeName="x" attributeType="XML" 
	          begin="5s" dur="1s" fill="freeze" from="-220" to="-53" />
		</text>
		
		<!--移動x-->
		<text
		     d="TextElement2" x="-500" y="0"
		     style="font-family:Arial; font-size:30px;color:#000000" > 
				 x
			<animate attributeName="x" attributeType="XML" 
	          begin="6s" dur="1s" fill="freeze" from="-220" to="-75" />
		</text>
		
		<!--移動E-->
		<text
		     d="TextElement2" x="-500" y="0"
		     style="font-family:Arial; font-size:30px;color:#000000" > 
				 E
			<animate attributeName="x" attributeType="XML" 
	          begin="7s" dur="1s" fill="freeze" from="-220" to="-100" />
		</text>
		

	</g>


</svg>


		
<その6> 

最後にフェイドインや拡大などを追加して完成。


サンプル
		
<?xml version="1.0" ?>

<svg>

  <!--SVG回転-->
  <g transform="translate(200,200)">
    <g transform="skewX(10)">
      <g transform="skewY(40)">
      
        <text style="font-size:70px;color:lightblue">
        
          <!--回転-->
          <animateTransform attributeName="transform" 
                           type="rotate" 
                           values="0;360" 
                           dur="1s" 
                           repeatDur="indefinite"/>
                           
         SVG
        </text>
      </g>    
    </g>
  </g>

  <!--Example移動-->
	<g transform="translate(250,240)">
		<!--移動e-->
		<text
		     d="TextElement2" x="-500" y="0"
		     style="font-family:Arial; font-size:30px;color:#000000" > 
				 e
			<animate attributeName="x" attributeType="XML" 
	             begin="1s" dur="1s" fill="freeze" from="-220" to="40" />
		</text>
		
		<!--移動l-->
		<text
		     d="TextElement2" x="-500" y="0"
		     style="font-family:Arial; font-size:30px;color:#000000" > 
				 l
			<!--移動-->
			<animate attributeName="x" attributeType="XML" 
	          begin="2s" dur="1s" fill="freeze" from="-220" to="25" />
		</text>

		<!--移動p-->
		<text
		     d="TextElement2" x="-500" y="0"
		     style="font-family:Arial; font-size:30px;color:#000000" > 
				 p
			<animate attributeName="x" attributeType="XML" 
	          begin="3s" dur="1s" fill="freeze" from="-220" to="0" />
		</text>
		
		<!--移動m-->
		<text
		     d="TextElement2" x="-500" y="0"
		     style="font-family:Arial; font-size:30px;color:#000000" > 
				 m
			<animate attributeName="x" attributeType="XML" 
	          begin="4s" dur="1s" fill="freeze" from="-220" to="-30" />
		</text>
		
		<!--移動a-->
		<text
		     d="TextElement2" x="-500" y="0"
		     style="font-family:Arial; font-size:30px;color:#000000" > 
				 a
			<animate attributeName="x" attributeType="XML" 
	          begin="5s" dur="1s" fill="freeze" from="-220" to="-53" />
		</text>
		
		<!--移動x-->
		<text
		     d="TextElement2" x="-500" y="0"
		     style="font-family:Arial; font-size:30px;color:#000000" > 
				 x
			<animate attributeName="x" attributeType="XML" 
	          begin="6s" dur="1s" fill="freeze" from="-220" to="-75" />
		</text>
		
		<!--移動E-->
		<text
		     d="TextElement2" x="-500" y="0"
		     style="font-family:Arial; font-size:30px;color:#000000" > 
				 E
			<animate attributeName="x" attributeType="XML" 
	          begin="7s" dur="1s" fill="freeze" from="-220" to="-100" />
		</text>
		


		<!--フェイドアウト-->
		<animate attributeName="opacity" attributeType="CSS"  
	          begin="8s" from="1" to="0" dur="1s"  fill="freeze" repeatCount="0" />
		<!--フェイドイン-->
		<animate attributeName="opacity" attributeType="CSS"  
	          begin="9s" from="0" to="1" dur="1s"  fill="freeze" repeatCount="0" />
	         

		<!--サイズ変更-->
		<animateTransform attributeName="transform" 
		        type="scale" 
		        values="1 1 ; 2 2 ; 1 1" 
		        additive="sum" 
	          begin="9s" 
		        dur="3" 
		        repeatCount="0" />
	</g>


</svg>

		

Toshirou Takahashi tato@fureai.or.jp