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