Hi Ted,
I think the problem is simple it's not 'mouseevents="fill"' it's 'pointer-events="fill"'. Read the SVG spec on events:
http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty
As for an example it's fairly large and complex but it does
use a glasspane (actually a background event catcher but that
is what you want anyways):
xml-batik/samples/solitaire/towers.svg[EMAIL PROTECTED] wrote:
Thomas,
This presentaion was good (thanks!) , but contained only the basics of registering event listeners on an Element. The original problem remains.
I have been trying to solve this problem for several days now, with no success. I have tried to implement Andreas' "glasspane" solution with no luck.
Do you have any other suggestions ? Any example code? An example SVG file?
Here is the prototype svg file I am using. Is there something semantically incorrect here? (Element "top" is one attempt at a "glasspane"; I can't get any Events from it. Element "TedsRectangle" receives all events correctly)
?xml version="1.0"?> <!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'> <svg xmlns:xlink="http://www.w3.org/1999/xlink"; style="fill-opacity:1; color-rendering:auto; color-interpolation:auto; text-rendering:auto; stroke:black; stroke-linecap:square; stroke-miterlimit:10; shape-rendering:auto; stroke-opacity:1; fill:black; stroke-dasharray:none; font-weight:normal; stroke-width:1; font-family:'sansserif'; font-style:normal; stroke-linejoin:miter; font-size:12; stroke-dashoffset:0; image-rendering:auto;" xmlns="http://www.w3.org/2000/svg";> <!--Generated by the Batik Graphics2D SVG Generator--> <defs id="genericDefs" /> <g > <g id="floor-tiles"> <g transform="translate(50,30)" style="fill:silver; font-size:11; font-family:'Arial' stroke:silver;"> <line x1="0" x2="0" y1="0" style="fill:none;" y2="820" /> <line x1="36" x2="36" y1="0" style="fill:none;" y2="820" /> <line x1="72" x2="72" y1="0" style="fill:none;" y2="820" /> <line x1="108" x2="108" y1="0" style="fill:none;" y2="820" /> <line x1="144" x2="144" y1="0" style="fill:none;" y2="820" /> <line x1="180" x2="180" y1="0" style="fill:none;" y2="820" /> <line x1="216" x2="216" y1="0" style="fill:none;" y2="820" /> <line x1="252" x2="252" y1="0" style="fill:none;" y2="820" /> <line x1="288" x2="288" y1="0" style="fill:none;" y2="820" /> <line x1="324" x2="324" y1="0" style="fill:none;" y2="820" /> <line x1="360" x2="360" y1="0" style="fill:none;" y2="820" /> <line x1="396" x2="396" y1="0" style="fill:none;" y2="820" /> <line x1="432" x2="432" y1="0" style="fill:none;" y2="820" /> <line x1="468" x2="468" y1="0" style="fill:none;" y2="820" /> <line x1="504" x2="504" y1="0" style="fill:none;" y2="820" /> <line x1="540" x2="540" y1="0" style="fill:none;" y2="820" /> <line x1="576" x2="576" y1="0" style="fill:none;" y2="820" /> <line x1="612" x2="612" y1="0" style="fill:none;" y2="820" /> <line x1="648" x2="648" y1="0" style="fill:none;" y2="820" /> <line x1="684" x2="684" y1="0" style="fill:none;" y2="820" /> <line x1="720" x2="720" y1="0" style="fill:none;" y2="820" /> <line x1="756" x2="756" y1="0" style="fill:none;" y2="820" /> <line x1="792" x2="792" y1="0" style="fill:none;" y2="820" /> <line x1="828" x2="828" y1="0" style="fill:none;" y2="820" /> <line x1="864" x2="864" y1="0" style="fill:none;" y2="820" /> <line x1="900" x2="900" y1="0" style="fill:none;" y2="820" /> <line x1="936" x2="936" y1="0" style="fill:none;" y2="820" /> <line x1="972" x2="972" y1="0" style="fill:none;" y2="820" /> <line x1="1008" x2="1008" y1="0" style="fill:none;" y2="820" /> <line x1="1044" x2="1044" y1="0" style="fill:none;" y2="820" /> <line x1="0" x2="1047" y1="0" style="fill:none;" y2="0" /> <line x1="0" x2="1047" y1="36" style="fill:none;" y2="36" /> <line x1="0" x2="1047" y1="72" style="fill:none;" y2="72" /> <line x1="0" x2="1047" y1="108" style="fill:none;" y2="108" /> <line x1="0" x2="1047" y1="144" style="fill:none;" y2="144" /> <line x1="0" x2="1047" y1="180" style="fill:none;" y2="180" /> <line x1="0" x2="1047" y1="216" style="fill:none;" y2="216" /> <line x1="0" x2="1047" y1="252" style="fill:none;" y2="252" /> <line x1="0" x2="1047" y1="288" style="fill:none;" y2="288" /> <line x1="0" x2="1047" y1="324" style="fill:none;" y2="324" /> <line x1="0" x2="1047" y1="360" style="fill:none;" y2="360" /> <line x1="0" x2="1047" y1="396" style="fill:none;" y2="396" /> <line x1="0" x2="1047" y1="432" style="fill:none;" y2="432" /> <line x1="0" x2="1047" y1="468" style="fill:none;" y2="468" /> <line x1="0" x2="1047" y1="504" style="fill:none;" y2="504" /> <line x1="0" x2="1047" y1="540" style="fill:none;" y2="540" /> <line x1="0" x2="1047" y1="576" style="fill:none;" y2="576" /> <line x1="0" x2="1047" y1="612" style="fill:none;" y2="612" /> <line x1="0" x2="1047" y1="648" style="fill:none;" y2="648" /> <line x1="0" x2="1047" y1="684" style="fill:none;" y2="684" /> <line x1="0" x2="1047" y1="720" style="fill:none;" y2="720" /> <line x1="0" x2="1047" y1="756" style="fill:none;" y2="756" /> <line x1="0" x2="1047" y1="792" style="fill:none;" y2="792" /> </g> </g> <g transform="translate(50,30)" style="fill:white; font-size:11; font-family:'Arial'; stroke:white;"> <path d="M1047.0059814453125 0 L1047.0059814453125 820.9979858398438 L0 820.9979858398438 L0 820.9979858398438 L1047.0059814453125 820.9979858398438 L1047.0059814453125 0 Z" style="fill:none;" /> <path d="M1047.0059814453125 0 L1047.0059814453125 820.9979858398438 L0 820.9979858398438 L0 820.9979858398438 L1047.0059814453125 820.9979858398438 L1047.0059814453125 0 Z" style="stroke:none;" /> </g> <g> <g transform="translate(50,30)" style="fill:silver; font-size:11; font-family:'Arial'; stroke:silver;"> <path d="M1047.0059814453125 0 L1047.0059814453125 820.9979858398438 L0 820.9979858398438 L0 0 ZM-10 -10 L-10 810.9979858398438 L-10 830.9979858398438 L1057.0059814453125 830.9979858398438 L1057.0059814453125 810.9979858398438 L1057.0059814453125 -10 Z" style="stroke:none;" /> <path d="M1047.0059814453125 0 L1047.0059814453125 820.9979858398438 L0 820.9979858398438 L0 0 ZM-10 -10 L-10 810.9979858398438 L-10 830.9979858398438 L1057.0059814453125 830.9979858398438 L1057.0059814453125 810.9979858398438 L1057.0059814453125 -10 Z" style="fill:none; stroke:black;" /> </g> </g> <g id="TedsRectangle"> <g transform="translate(50,30)" style="font-size:11; fill:rgb(230,230,245); font-family:'Arial'; stroke:rgb(230,230,245); stroke-width:1.5;"> <rect x="216" y="72" width="44.2494" style="stroke:none;" height="63" /> <rect x="216" y="72" width="44.2494" style="fill:none; stroke:rgb(0,0,205);" height="63" /> <text x="225.12469482421875" y="83" style="font-size:9; fill:black; stroke:none;" xml:space="preserve">R4/Z1 </text> <text x="222.12469482421875" y="101" style="font-size:8; fill:black; stroke:none;" xml:space="preserve">W1:17.00 </text> <text x="222.12469482421875" y="109" style="font-size:8; fill:black; stroke:none;" xml:space="preserve">W2:23.00 </text> </g> </g> <g id="top"> <g transform="translate(50,30)" style="fill:none; mouseevents:fill"> <rect x="0" y="0" width="400" style="stroke:none;" height="400" /> </g> </g> </g> </svg>
Thomas DeWeese <[EMAIL PROTECTED] odak.com> To [email protected] 05/11/2005 10:05 cc PM Subject Re: Fw: Create a "glasspane" Please respond to programmatically? [EMAIL PROTECTED] aphics.apache.org
Hi Ted,
IIRC my ApacheCON 2003 presentation had something on this:
http://people.apache.org/~deweese/ac2003/
[EMAIL PROTECTED] wrote:
Would a better approach to this problem be to create a big rectangle (ie.
a
"glasspane") add it to the SVGDoc and register this element as an Event listener?
Are there any examples of how to create one of these programatically?
====================================================================================
I have a JSVGCanvas (with a DOM representaion) of an imported SVG file. This file basically contains a plain white grid with several rectangles
in
it. I need to detect if the user has clicked in a "whitespace" area (ie. not
in
a rectangle "Element").
I have a Event listener on each rectangle, so I can detect a "click"
within
the rectangle itself. Attempts to put an Event listener on the "whole document" like this have failed:
Element elt = theDocument.getDocumentElement(); EventTarget t = (EventTarget)elt; t.addEventListener("click", new WhiteSpaceClickAction(), false);
I can detect ALL mouse events on the JSVGCanvas itself using Mouse Listeners, (ie. MouseListener, MouseMotionListener) but this still doesn't help, since I can't tell if the X, Y coordinates are "in" a rectangle or not.
Is there a "standard" way to do this? Is there an API call to query if a coordinate is within an Element?
Thanks for any help. Ted
--------------------------------------------------------------------- To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
--------------------------------------------------------------------- To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
--------------------------------------------------------------------- To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
--------------------------------------------------------------------- To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
