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>
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 = ""
xmlns: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.
Search WWH ::

Custom Search