HTML and CSS Reference
In-Depth Information
86T260 83Q231 82 201 78ZM194 70Q190 60 188 53Q181
36 176 30Q172 27 169 25T165 18Q162 15 162 12Q175
23 181 31Q196 52 194 70ZM491 126Q494 122 489
136T475 174T452 232T424 303Q390 388 344 496Q383
394 414 314Q429 278 442 245T465 187T481 144T491
126Z”/>
To use a full alphabet you will need to create the lowercase and
uppercase for each character on the keyboard. Your files for a
simple font will get very large very quickly.
Adding Interactivity and Javascript to Your
SVG Drawings
You can use JavaScript to add interactivity to your SVG
illustrations. You do this using the SCRIPT element in your SVG
document. The following example adds a JavaScript that changes
the color of a rectangle shape each time you click on it.
<?xml version=”1.0” encoding=”UTF-8”
standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”
“http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/
svg10.dtd”>
<svg xmlns=”http://www.w3.org/2000/svg”
xmlns:xlink=”http://www.w3.org/1999/xlink”
width=”800” height=”800”>
<script type=”text/ecmascript”>
<![CDATA[
function randomColor(evt) {
var red = Math.round(Math.random() * 255);
var green = Math.round(Math.random() * 255);
var blue = Math.round(Math.random() * 255);
evt.target.setAttributeNS(null,”fill”,”rgb(“+
red +”,”+ green+”,”+blue+”)”);
}
]]>
</script>
<rect id=”myBlueRect” width=”600”height=”600”
x=”40” y=”20” fill=”orange” onClick=”randomColor
(evt)”/>
</svg>
You can see that the JavaScript is wrapped in a CDATA
element. This allows the script to be correctly interpreted by the
JavaScript engine running in the web browser. The
onClick
event attribute links the name of the JavaScript function with the
rectangle.
