Understanding the Gravity of HTML5 - Learn HTML5 by Creating Fun Games - page 148

}
</script>
</body>
A few important details about the preceding code snippet that you should always re-
member are:
• The imported SVG Document is treated as an external document (similar
to an Iframe), meaning that any CSS outside of that document (such as
the host document) is outside of its scope. Thus, if you want to apply a
CSS class to an SVG node from a getSVGDocument() call, that CSS
class must be defined within the same SVG file that was imported origin-
ally.
• The CSS attributes for SVG are slightly different. For example, instead
of defining a background color you would define a fill color. Basically, the
same attributes that are used on the SVG elements themselves, are the
same ones you'd use in a corresponding stylesheet declaration.
• Any browser-specific CSS attributes can be applied to SVG nodes (for
example, transition, cursor, etc.)
Thus, the preceding example is completed with the following .svg file as the corres-
ponding red-circle.svg file, as used in the following code snippet:
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="150"
height="150">
<style type="text/css">
.blue {
/* CSS Specific to SVG */
fill: #0000ff;
/* CSS Specific to the browser */
cursor: pointer;
-webkit-transition: fill 1.25s;