HTML and CSS Reference
In-Depth Information
<image
x=
"145"
y=
"289"
width
=
"60"
height
=
"40"
xlink:href=
"ufo.svg"
/>
<rect x="230" y="249" width="134" height="50" />
<path d="M 231 274 l -20 20 L 231 289 L 231 284" />
<text class
=
"quote"
x=
"240"
y=
"269"
>
Ready to be powned
</text>
<text class
=
"quote"
x=
"240"
y=
"286"
>
again human?
</text>
</g>
Step 7: Configure the game's flexible viewBox
Let's configure your
viewBox
by altering
<svg>
to conform to a user's window size,
without affecting the game's Cartesian graph. Set
viewBox
with four different attributes
for min-x, min-y, width, and height (
<svg viewBox="min-x min-y width
height">
). You don't need a minimum
x
and
y
because you want to center the game, so
feed it 0 values for both. Then set the width and height to 500, which is the size of your
SVG application.
Your modified
<svg>
tag should look like the following snippet:
<svg id
=
"svg"
viewBox
=
"0 0 500 500"
version
=
"1.1"
xmlns
=
"http://www.w3.org/2000/svg"
xmlns:xlink
=
"http://www.w3.org/1999/xlink"
clip-path
=
"url(#clip)"
>
Confirm that your game's flexible layout is working with a browser refresh; then replace
#screenWelcome { display: none }
with
#screenGameover { dis-
play: none }
in your style.css. You should now see the Welcome screen when you
refresh your browser.
#screenWelcome { display: none }
#screenGameover { display: none }
Understanding how
<svg>
's
viewBox
parameter works is difficult if you're new to the
concept of vector-based viewports. If you're confused about how all the resizing works, we
recommend tinkering with the
viewBox
parameter before proceeding.
