HTML and CSS Reference
In-Depth Information
Figure 9-14.
The map with some basic styling
As you're moving the mouse around the map it would be nice to highlight the state that the mouse is
currently pointing to. Add the following rule to the
style
element after the existing rules.
path:hover
{
opacity: .5;
}
Using Gradient Fills
You can use gradient fills with SVG elements but they are implemented differently than typical HTML elements.
You first have to define the gradient and then reference using a url.
Add the following
defs
element inside the
svg
element but before the
style
element:
<defs>
<linearGradient id="blueGradient"
x1="0%" y1="0%"
x2="100%" y2="100%"
spreadMethod="pad">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
<stop offset="50%" stop-color="#6699cc" stop-opacity="1"/>
<stop offset="100%" stop-color="#4466aa" stop-opacity="1"/>
</linearGradient>
</defs>
The
defs
element is used to define something that can be referred to later in the document. It doesn't do
anything until it is actually referenced. Here you are defining a
linearGradient
element and giving it the
id
blueGradient. You will reference it using the
id
attribute.
