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.
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:
<linearGradient id="blueGradient"
x1="0%" y1="0%"
x2="100%" y2="100%"
<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"/>
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.
Search WWH ::

Custom Search