HTML and CSS Reference
In-Depth Information
or CSS3. Create your text with animation by including the following snippet inside
<g
id="screenWelcome"></g>:
<g id="screenWelcome">
<text id
=
"title1"
x=
"110"
y=
"137"
>
SVG
</text>
<text id
=
"title2"
x=
"115"
y=
"200"
>
ALIENS
</text>
<text id
=
"more"
x=
"130"
y=
"400"
>
<animate attributeType="CSS" attributeName="opacity" from="0"
to="1" dur="5s" />
Click To Play
</text>
</g>
What else can you animate?
In addition to CSS, you can animate transforms and movement directions and more.
Visit
http://www.w3.org/TR/SVG11/animate.html
to delve into the nitty-gritty details. Be
warned, the document contains more than 14,000 words and seems to favor browser
vendors over developers in its terminology and examples.
7.2.3. Using XLink and advanced shapes
With basic shapes, text, and gradients set up, we'll make use of more advanced SVG tags
to create graphics. First, we'll start by showing you a shortcut method to pull graphics in
through XLink. After that, you can create graphics from scratch using a
<path>
.
XLink, a W3C specification, stands for XML Linking Language. We're primarily using it
to import SVG files, but it serves other purposes, such as creating links inside SVG through
the
<a>
element.
