HTML and CSS Reference
In-Depth Information
Code and progress check
You've integrated several different code snippets throughout this chapter. Double-check in-
dex.html against the following listing to verify that you've properly set up your SVG code.
Listing 7.6. index.html—Welcome screen
<g id="screenWelcome">
<text id
=
"title1"
x=
"110"
y=
"137"
>
SVG
</text>
<text id
=
"title2"
x=
"115"
y=
"200"
>
ALIENS
</text>
<image
x=
"200"
y=
"230"
width
=
"25"
height
=
"19"
xlink:href=
"ufo.svg"
/>
<text
x=
"233"
y=
"247"
>
= 1pt
</text>
<image
x=
"185"
y=
"270"
width
=
"40"
height
=
"20"
xlink:href=
"mothership.svg"
/>
<text
x=
"233"
y=
"287"
>
= 30pts
</text>
<text
x=
"145"
y=
"328"
>
+1
</text>
<path class="ship" d="M 175 312 m 0 15 l 9 5 h 17 l 9 -5 l -2 -5
l -10 3 l -6 -15 l -6 15 l -10 -3 l -2 5" />
<text
x=
"217"
y=
"328"
>
life = 100pts
</text>
<text id
=
"more"
x=
"130"
y=
"400"
>
<animate attributeType="CSS" attributeName="opacity" from="0"
to="1" dur="5s" />
Click To Play
</text>
</g>
After a browser refresh, your screen should look identical to the Welcome screen shown in
