HTML Pages with Images Embedded in SVG | Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)

URL-Enabled Ellipses

Consider the ellipses rendered in Figure 11.3.

click to expand
Figure 11.3: URL-enabled ellipses.

The SVG document hyperLinkEllipses1.svg in Listing 11.5 demonstrates how to use the SVG onclick element in order to resize a circle and change its color.

Listing 11.5 hyperLinkEllipses1.svg

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="100%" height="100%"      xmlns="http://www.w3.org/2000/svg"      xmlns:xlink="http://www.w3.org/1999/xlink"> <g transform="translate(100,50)">   <text font-size="24" color="black">      Click on any ellipse:   </text> </g> <g transform="translate(100,100)">   <rect x="0" y="0" width="200" height="200"         fill="none" stroke="blue"  stroke-width="4"/>   <a xlink:href="http://www.w3.org">     <ellipse fill="red" cx="0" cy="0"              rx="50" ry="25"/>   </a>   <a xlink:href="http://www.w3.org">     <ellipse fill="green" cx="200" cy="0"              rx="50" ry="25"/>   </a>   <a xlink:href="http://www.w3.org">     <ellipse fill="blue" cx="200" cy="200"              rx="50" ry="25"/>   </a>   <a xlink:href="http://www.w3.org">     <ellipse fill="yellow" cx="0" cy="200"              rx="50" ry="25"/>   </a> </g> </svg>

Remarks

Listing 11.5 starts by displaying a message with the following code fragment:

<g transform="translate(100,50)">   <text font-size="24" color="black">      Click on any ellipse:   </text> </g>

Next, Listing 11.5 renders an 'anchor rectangle' with the following SVG code fragment:

<rect x="0" y="0" width="200" height="200"       fill="none" stroke="blue" stroke-width="4"/>

Lastly, Listing 11.5 renders an ellipse that is centered on each of the four vertices of the anchor rectangle. For example, the following code fragment renders an ellipse whose center is the upper-left vertex of the anchor rectangle:

<a xlink:href="http://www.w3.org">     <ellipse fill="red" cx="0" cy="0"              rx="50" ry="25"/> </a>

When you click on the ellipse with your mouse, your browser will be directed to the URL http://www.w3.org because it is associated with the ellipse by means of the SVG a element.

This example used an ellipse for the purpose of illustrating the SVG a element; in general, though, SVG allows you great flexibility in terms of the graphics image that you wish to associate with an URL. Depending on your needs, you can easily create SVG documents with lots of fancy 'URL-enabled' graphics images.