SVG Web Template Site


Google’s SVGweb does not yet support all of the animations for SVG; Google still has it in beta. … if the project goes anywhere will need to use transforms more than likely; hate to use silverlight for this when HTML5 will support SVG.


<?xml version=”1.0″ standalone=”no”?>

<svg width=”800″ height=”600″ version=”1.1″
xmlns=”http://www.w3.org/2000/svg&#8221;
xmlns:xlink=”http://www.w3.org/1999/xlink”&gt;

<rect width=”800″ height=”600″ fill=”black”/>

<g>
<text x=”20″ y=”30″ font-family=”arial”  font-size=”30″ fill=”red” >
Menu one
<animate attributeName=”y” attributeType=”XML”
begin=”0s” dur=”2s” fill=”freeze” values=”0;30″ />
</text>

<text x=”220″ y=”30″ font-family=”arial”  font-size=”30″ fill=”yellow” >

Menu two
<animate attributeName=”y” attributeType=”XML”
begin=”0s” dur=”2s” fill=”freeze” values=”0;30″ />
</text>

<text x=”420″ y=”30″ font-family=”arial”  font-size=”30″ fill=”green” >
Menu three
<animate attributeName=”y” attributeType=”XML”
begin=”0s” dur=”2s” fill=”freeze” values=”0;30″ />
</text>

<a xlink:href=”/” target=”_top”>
<text x=”620″ y=”30″ font-family=”arial”  font-size=”30″ fill=”blue” >

Menu four
<animate attributeName=”y” attributeType=”XML”
begin=”0s” dur=”2s” fill=”freeze” values=”0;30″ />
</text>
</a>

<image x=”0″ y=”50″ width=”200px” height=”600px” xlink:href=”1.jpg”>
<animate attributeName=”y” attributeType=”XML”
begin=”0s” dur=”3s” fill=”freeze” values=”600;50″ />
</image>

<image x=”200″ y=”50″ width=”200px” height=”600px” xlink:href=”2.jpg”>

<animate attributeName=”y” attributeType=”XML”
begin=”0s” dur=”4s” fill=”freeze” values=”600;50″ />
</image>

<image x=”400″ y=”50″ width=”200px” height=”600px” xlink:href=”3.jpg”>
<animate attributeName=”y” attributeType=”XML”
begin=”0s” dur=”5s” fill=”freeze” values=”600;50″ />
</image>

<image x=”600″ y=”50″ width=”200px” height=”600px” xlink:href=”4.jpg”>
<animate attributeName=”y” attributeType=”XML”
begin=”0s” dur=”6s” fill=”freeze” values=”600;50″ />
</image>

</g>

<!– 2010 (C) Wayne Smith – open to use commercial or private providing credit is given –>

</svg>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: