You are viewing a plain text version of this content. The canonical link for it is here.
Posted to batik-dev@xmlgraphics.apache.org by Carlos Sanchez <ca...@ktsi.com> on 2001/02/22 22:35:48 UTC
Examples
Hi,
Does any one has some examples of using batik and [SVG] events.
Thx,
Carlos
Re: Examples
Posted by Christophe Jolif <cj...@ilog.fr>.
Carlos,
Here is a very simple example using Rhino EcmaScript engine that respond
to SVG events:
<svg width="300" height="150" onunload="System.out.println('onload
called')">
<script type="text/ecmascript">
function printEvent(evt) {
System.out.println("screen "+evt.screenX+" "+evt.screenY)
System.out.println("client "+evt.clientX+" "+evt.clientY)
System.out.println(evt.target)
}
</script>
<g transform="translate(30, 30)">
<ellipse cx="10" cy="10" rx="40" ry="40"
transform="translate(-25 -25) rotate(45) translate(25 25)"
style="fill:blue;stroke:none;visibility:hidden"
onclick="printEvent(evt)"
onmousedown="System.out.println('onmousedown the blue
rectangle')"
onmouseup="System.out.println('onmouseup the blue rectangle')"
onmouseover="System.out.println('onmouseover the blue
rectangle')"
onmouseout="System.out.println('onmouseout the blue
rectangle')"
onmousemove="System.out.println('onmousemove the blue
rectangle')"
/>
<ellipse id="toto" cx="70" cy="10" rx="40" ry="40"
style="fill:none;stroke:red"
onclick="printEvent(evt)"
onmousedown="System.out.println('onmousedown the red
rectangle')"
onmouseup="System.out.println('onmouseup the red rectangle')"
onmouseover="System.out.println('onmouseover the red
rectangle')"
onmouseout="System.out.println('onmouseout the red
rectangle')"
onmousemove="System.out.println('onmousemove the red
rectangle')"
/>
<ellipse cx="10" cy="70" rx="40" ry="40"
style="fill:yellow;stroke:none"
onclick="printEvent(evt)"
onmousedown="System.out.println('onmousedown the yellow
rectangle')"
onmouseup="System.out.println('onmouseup the yellow
rectangle')"
onmouseover="System.out.println('onmouseover the yellow
rectangle')"
onmouseout="System.out.println('onmouseout the yellow
rectangle')"
onmousemove="System.out.println('onmousemove the yellow
rectangle')"
/>
<ellipse cx="70" cy="70" rx="40" ry="40"
style="fill:green;stroke:none"
onclick="printEvent(evt)"
onmousedown="System.out.println('onmousedown the green
rectangle')"
onmouseup="System.out.println('onmouseup the green
rectangle')"
onmouseover="System.out.println('onmouseover the green
rectangle')"
onmouseout="System.out.println('onmouseout the green
rectangle')"
onmousemove="System.out.println('onmousemove the green
rectangle')"
/>
</g>
<g transform="translate(130, -65)">
<text x="60" y="125">Click on an ellipse </text>
<text x="60" y="140">and look in the console</text>
</g>
</svg>
But, please don't forget that for the moment dynamic modifications of
the DOM are not forwared to the GVT treee (display).
Carlos Sanchez wrote:
> Does any one has some examples of using batik and [SVG] events.
Hope this helps,
--
Christophe