HTML and CSS Reference
In-Depth Information
<pattern id="TXflag" patternUnits="objectBoundingBox" width="1" height="1">
<image xlink:href="~/Images/TX_Flag.jpg" x="0" y="0"
width="377" height="226" />
</pattern>
4.
Add the following path rule, which will use the new pattern for the state of Texas.
path[id="TX"]
{
fill: url(#TXflag);
}
5.
Press F5 to start the application and go to the map page. You should see the
background image as shown in Figure
9-16
.
Figure 9-16.
Using a background image
Since this is a chapter on SVG I felt a little funny about using a bitmap image. You can see the degraded
image quality when the image is stretched. The state flag of Texas is one of the easiest to draw with SVG but I
wanted to demonstrate that bitmapped images can be used within an SVG definition. But just for the record, here
is the flag expressed in SVG (this was downloaded from the same Wikimedia Commons site I mentioned earlier
and reformatted slightly).
Listing 9-4.
The Texas state flag in SVG
<rect width="1080" height="720" fill="#fff"/>
<rect y="360" width="1080" height="360" fill="#bf0a30"/>
<rect width="360" height="720" fill="#002868"/>
<g transform="translate(180,360)" fill="#fff">
