|
|
Consider the ellipse rendered in Figure 11.9.
Figure 11.9: A mouse-aware scaling ellipse.
The SVG document in Listing 11.11 demonstrates how to use the SVG onclick element in order to resize a scaling ellipse.
Listing 11.11 scalingEllipse1.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"> <desc>Capture mouse click events</desc> <!-- script for updating the visible ellipse --> <script type="text/ecmascript"> <![CDATA[ function mouseClick1(event) { var ellipse = event.target; var currentXRadius = ellipse.getAttribute("rx"); if(currentXRadius == 120) { ellipse.setAttribute("rx", currentXRadius*2); ellipse.setAttribute("fill", "#FF0000"); } else { ellipse.setAttribute("rx", currentXRadius*0.5); ellipse.setAttribute("fill", "#FFFF00"); } } ]]> </script> <g transform="translate(20,50)"> <text x="0" y="0" font-size="30"> Click on the moving ellipse </text> </g> <!-- rectangular background --> <g transform="translate(50,100)"> <rect x="0" y="0" width="500" height="400" fill="#CCCCCC" stroke="blue"/> <!-- Handle mouse click via script function --> <ellipse onclick="mouseClick1(evt)" cx="250" cy="200" rx="120" ry="60" fill="blue"> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="0" to="1" begin="0s" dur="4s"/> </ellipse> </g> </svg>
When you click inside the moving ellipse, the ECMAScript function mouseClick1() is executed; the contents of this function are given below:
function mouseClick1(event) { var ellipse = event.target; var currentXRadius = ellipse.getAttribute("rx"); if(currentXRadius == 120) { ellipse.setAttribute("rx", currentXRadius*2); ellipse.setAttribute("fill", "#FF0000"); } else { ellipse.setAttribute("rx", currentXRadius*0.5); ellipse.setAttribute("fill", "#FFFF00"); } }
The function mouseClick1() initializes the variable ellipse with an object. The variable currentXRadius is assigned the value of the rx attribute of the variable ellipse with the following line of code:
var currentXRadius = ellipse.getAttribute('rx");
Next, the 'if/then" logic determines which block of code to execute in order to assign values to the rx attribute (i.e., the horizontal axis for the ellipse) and the fill attribute:
if(currentXRadius == 120) { ellipse.setAttribute('rx", currentXRadius*2); ellipse.setAttribute('fill", '#FF0000"); } else { ellipse.setAttribute('rx", currentXRadius*0.5); ellipse.setAttribute('fill", '#FFFF00"); }
The examples that you have seen in this chapter demonstrated how to associate mouse-related events with SVG elements and then use getAttribute/setAttribute in ECMAScript functions in order to dynamically update attributes of SVG elements.
Key Constructs
An SVG document can be launched in an HTML page with the following HTML
fragment:
<embed width="500" height="400" src="/books/2/32/1/html/2/displayRect1.svg" type="image/svg">
The following SVG fragment specifies an URL-enabled ellipse:
<a xlink:href="http://www.w3.org"> <ellipse fill="red" cx="0" cy="0" rx="50" ry="25"/> </a>
The following SVG fragment specifies a 'mouse-aware' rectangle:
<rect x="0" y="0" width="200" height="100" style="fill:red;stroke:blue;stroke-width:4;"> <set begin="mouseover" end="mouseout" attributeName="fill" from="#FFFF00" to="#000000"/> </rect>
The following SVG fragment specifies a 'mouse-aware' rectangle that becomes invisible when you move your mouse over the rectangle:
<rect x="0" y="0" width="200" height="100" style="fill:red;stroke:blue;stroke-width:4;"> <set begin="mouseover" end="mouseout" attributeName="fill" from="#FFFF00" to="#000000"/> <set attributeName="visibility" attributeType="XML" to="hidden" begin="1s" dur="3s"/> </rect>
The following ECMAScript function changes the radius of a rendered circle:
function mouseClick1(evt) { var circle = evt.target; var currentRadius = circle.getAttribute("r"); if(currentRadius == 100) { circle.setAttribute("r", currentRadius*2); circle.setAttribute("fill", "#FF0000"); } else { circle.setAttribute("r", currentRadius*0.5); circle.setAttribute("fill", "#FFFF00"); } }
|
|