Interactivity
in SVG s not so difficult, it can be done with the help of features of SVG
language itself. Those features can be used to make content more responsive to
the user initiated events. This feature in SVG can be used for causing changes
to the cursor which shows the current position of the device which is been pointing
by utilizing the user movements of the pointing device. This can also be used
for the purpose of causing animations in user-initiated actions lie a button
press, cursor movements etc.
.
Below is an
example of simple SVG interactivity
example for expanding this post to its end.
Example:
<!DOCTYPE
html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Nirajanghimirey’s workshop</title>
</head>
<body>
<h1> Interactivity example</h1>
<svg width="600" height="600">
<script type="text/JavaScript">
<![CDATA[
function showColor() {
alert("Color of the Rectangle is: "+
document.getElementById("rect1").getAttributeNS(null,"fill"));
}
function showArea(event){
var width = parseFloat(event.target.getAttributeNS(null,"width"));
var height = parseFloat(event.target.getAttributeNS(null,"height"));
alert("Area of the rectangle is: " +width +"x"+ height);
}
function showRootChildrenCount() {
alert("Total Children: "+document.documentElement.childNodes.length);
}
]]>
</script>
<g>
<text x="30" y="50" onClick="showColor()">Click me to see the rectangle color.</text>
<rect id="rect1" x="100" y="100" width="200" height="200"
stroke="#1998FF" stroke-width="8" fill="#2BC7FF"
onClick="showArea(event)"
/>
<text x="30" y="400" onClick="showRootChildrenCount()">
Click on me print child node count.</text>
</g>
</svg>
</body>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Nirajanghimirey’s workshop</title>
</head>
<body>
<h1> Interactivity example</h1>
<svg width="600" height="600">
<script type="text/JavaScript">
<![CDATA[
function showColor() {
alert("Color of the Rectangle is: "+
document.getElementById("rect1").getAttributeNS(null,"fill"));
}
function showArea(event){
var width = parseFloat(event.target.getAttributeNS(null,"width"));
var height = parseFloat(event.target.getAttributeNS(null,"height"));
alert("Area of the rectangle is: " +width +"x"+ height);
}
function showRootChildrenCount() {
alert("Total Children: "+document.documentElement.childNodes.length);
}
]]>
</script>
<g>
<text x="30" y="50" onClick="showColor()">Click me to see the rectangle color.</text>
<rect id="rect1" x="100" y="100" width="200" height="200"
stroke="#1998FF" stroke-width="8" fill="#2BC7FF"
onClick="showArea(event)"
/>
<text x="30" y="400" onClick="showRootChildrenCount()">
Click on me print child node count.</text>
</g>
</svg>
</body>
</html>
No comments:
Post a Comment