HTML and CSS Reference
In-Depth Information
Help! What to do if your SVG file paths are broken
If you notice that SVG path information from a vector-editing tool is offset or broken, you
can probably fix it. In some cases, moving the graphics to the center or top-left corner of
your SVG file's canvas fixes the issue. Another method is to remove any whitespace sur-
rounding your graphics (crop it). If all else fails, you can usually get away with manually
adding an offset by configuring SVG's
viewBox
property (as we did for your UFOs).
Creating dynamic movement
Every time the flock moves, it needs to test against the game's width and height because
SVG's collision detection isn't stable in all browsers at the time of writing. When SVG's
collision detection is more usable, you'll be able to use
getInter-sectionList
,
getEnclosureList
,
checkIntersection
, and
checkEnclosure
(more info
at
the
official
W3C
docs
You need to calculate an imaginary box around all the existing UFOs (called a
bounding
box
). Instead of trying to manually calculate a bounding box, you're going to call
