You are viewing a plain text version of this content. The canonical link for it is here.
Posted to batik-users@xmlgraphics.apache.org by Andres Toussaint <an...@onemileup.com> on 2003/10/02 15:14:40 UTC
Duplicate image references in SVG
Hi All,
When I add two instances of the same image to my document via the
<image> , and add a actionListener to the group, only the first
instance of the <image> reacts to the actionEvents.
How can I have duplicate references to the same image inside my SVG,
but that behave as individual instances to the EventListener? (I am
using a JSVGCanvas to represent the document)
For instance, i want tyhis image
xlink:href="../equipment/aircraftSpruce/M07TACH.svg" uid="OMU_93", and
the same one, with uid="OMU_93_2" to be placed on different loations on
the canvas, and to react individually to the MouseEvents. Each is
placed in its own Element.
I am aware that perhaps this is an SVG related issue, but any head
start would be truly appreciated,
Andres.
Abstract of the Element constructor:
String svgNS = "http://www.w3.org/2000/svg";
String xlinkNS = "http://www.w3.org/1999/xlink";
Element img = document.createElementNS(svgNS, "image");
img.setAttributeNS(null, "x", x.toString());
img.setAttributeNS(null, "y", y.toString());
img.setAttributeNS(null, "width", width.toString());
img.setAttributeNS(null, "height", hgt.toString());
img.setAttributeNS(xlinkNS,"xlink:href", image);
img.setAttribute("uid", uid);
imgGroup.add(img);
Sample of my SVG Document (extracted from the dynamic document via
DOMUtilities.writeDocument(doc, writer)).
<g style="none" id="imgGroup">
<rect x="0.0" y="0.0" width="3314"
style="fill-rule:nonzero;clip-
rule:nonzero;fill:none;stroke:none;stroke-width:0;stroke-
linecap:round;stroke-linejoin:round;stroke-miterlimit:4;" uid="buffer"
height="1574" pointer-events="fill"/><image x="1576.0" y="694.0"
width="162.0" xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="../equipment/aircraftSpruce/M04TACH.svg"
xlink:type="simple" uid="OMU_92" xlink:actuate="onRequest"
height="162.0" preserveAspectRatio="xMidYMid meet"
xlink:show="replace"/>
<image x="1578.0" y="883.0" width="162.0"
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="../equipment/aircraftSpruce/M07TACH.svg"
xlink:type="simple" uid="OMU_93" xlink:actuate="onRequest"
height="162.0" preserveAspectRatio="xMidYMid meet"
xlink:show="replace"/>
<image x="1578.0" y="883.0" width="162.0"
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="../equipment/aircraftSpruce/M07TACH.svg"
xlink:type="simple" uid="OMU_93_2" xlink:actuate="onRequest"
height="162.0" preserveAspectRatio="xMidYMid meet"
xlink:show="replace"/>
<image x="1541.0" y="444.0" width="225.0"
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="../equipment/aircraftSpruce/20KSALT.svg"
xlink:type="simple" uid="OMU_75" xlink:actuate="onRequest"
height="225.0" preserveAspectRatio="xMidYMid meet"
xlink:show="replace"/>
</g>
Re: Duplicate image references in SVG
Posted by Thomas DeWeese <Th...@Kodak.com>.
Andres Toussaint wrote:
> Both Actions Listeners DO get fired, so it is up to my code to
> determine which of the duplicates is triggering the event, right?
>
> If this is so, Is there a place in Batik i can intercept the Event to
> kill those not wanted, and only propagate the one i want?
This bug should now be fixed in CVS.
>
> Thanks in advance.
>
> Andres.
>
> On Thursday, October 2, 2003, at 10:36 AM, Thomas DeWeese wrote:
>
>> Andres Toussaint wrote:
>>
>>> Hi All,
>>> When I add two instances of the same image to my document via the
>>> <image> , and add a actionListener to the group, only the first
>>> instance of the <image> reacts to the actionEvents.
>>
>>
>> Hmm, are you sure that both of the action listeners aren't being fired?
>> The problem is that currently we have one copy of the document linked to
>> two graphics trees. So Both image element bridges should be registering
>> action listeners on the root svg of the referenced SVG document.
>>
>> We should probably just have the ImageNode in the rendering tree
>> check it's outline and if the point is in the outline forward the event
>> as it is the event traverses down into the referenced image (which
>> allows
>> things like 'pointer-events' within the referenced image to function
>> properly.
>>
>>
>>> How can I have duplicate references to the same image inside my SVG,
>>> but that behave as individual instances to the EventListener? (I am
>>> using a JSVGCanvas to represent the document)
>>> For instance, i want tyhis image
>>> *xlink:href="../equipment/aircraftSpruce/M07TACH.svg" uid="OMU_93",
>>> and the same one, with uid="OMU_93_2" *to be placed on different
>>> loations on the canvas, and to react individually to the
>>> MouseEvents. Each is placed in its own Element.
>>> I am aware that perhaps this is an SVG related issue, but any head
>>> start would be truly appreciated,
>>> Andres.
>>> Abstract of the Element constructor:
>>> String svgNS = "http://www.w3.org/2000/svg";
>>> String xlinkNS = "http://www.w3.org/1999/xlink";
>>> Element img = document.createElementNS(svgNS, "image");
>>> img.setAttributeNS(null, "x", x.toString());
>>> img.setAttributeNS(null, "y", y.toString());
>>> img.setAttributeNS(null, "width", width.toString());
>>> img.setAttributeNS(null, "height", hgt.toString());
>>> img.setAttributeNS(xlinkNS,"xlink:href", image);
>>> img.setAttribute("uid", uid);
>>> imgGroup.add(img);
>>> Sample of my SVG Document (extracted from the dynamic document via
>>> DOMUtilities.writeDocument(doc, writer)).
>>> <g style="none" id="imgGroup">
>>> <rect x="0.0" y="0.0" width="3314" style="fill-rule:nonzero;clip-
>>> rule:nonzero;fill:none;stroke:none;stroke-width:0;stroke-
>>> linecap:round;stroke-linejoin:round;stroke-miterlimit:4;"
>>> uid="buffer" height="1574" pointer-events="fill"/><image x="1576.0"
>>> y="694.0" width="162.0" xmlns:xlink="http://www.w3.org/1999/xlink"
>>> xlink:href="../equipment/aircraftSpruce/M04TACH.svg"
>>> xlink:type="simple" uid="OMU_92" xlink:actuate="onRequest"
>>> height="162.0" preserveAspectRatio="xMidYMid meet"
>>> xlink:show="replace"/>
>>> <image x="1578.0" y="883.0" width="162.0"
>>> xmlns:xlink="http://www.w3.org/1999/xlink"
>>> *xlink:href="../equipment/aircraftSpruce/M07TACH.svg"*
>>> xlink:type="simple" *uid="OMU_93"* xlink:actuate="onRequest"
>>> height="162.0" preserveAspectRatio="xMidYMid meet"
>>> xlink:show="replace"/>
>>> <image x="1578.0" y="883.0" width="162.0"
>>> xmlns:xlink="http://www.w3.org/1999/xlink"
>>> *xlink:href="../equipment/aircraftSpruce/M07TACH.svg"*
>>> xlink:type="simple" *uid="OMU_93_2"* xlink:actuate="onRequest"
>>> height="162.0" preserveAspectRatio="xMidYMid meet"
>>> xlink:show="replace"/>
>>> <image x="1541.0" y="444.0" width="225.0"
>>> xmlns:xlink="http://www.w3.org/1999/xlink"
>>> xlink:href="../equipment/aircraftSpruce/20KSALT.svg"
>>> xlink:type="simple" uid="OMU_75" xlink:actuate="onRequest"
>>> height="225.0" preserveAspectRatio="xMidYMid meet"
>>> xlink:show="replace"/>
>>> </g>
>>
>>
>>
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
>> For additional commands, e-mail: batik-users-help@xml.apache.org
>>
>>
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
> For additional commands, e-mail: batik-users-help@xml.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-users-help@xml.apache.org
Re: Duplicate image references in SVG
Posted by Thomas DeWeese <Th...@Kodak.com>.
Andres Toussaint wrote:
> Both Actions Listeners DO get fired, so it is up to my code to
> determine which of the duplicates is triggering the event, right?
>
> If this is so, Is there a place in Batik i can intercept the Event to
> kill those not wanted, and only propagate the one i want?
Well they both go through the SVGImageElementBridge.ForwardEventListener
The problem is that you won't have enough information to know which
to kill or not (consider overlapping image elements).
If you are happy with bbox rectangle detection you could place
a hidden rectangle over the image element's and register your event
listeners on that (visibility="hidden" pointer-events="fill").
>
> Thanks in advance.
>
> Andres.
>
> On Thursday, October 2, 2003, at 10:36 AM, Thomas DeWeese wrote:
>
>> Andres Toussaint wrote:
>>
>>> Hi All,
>>> When I add two instances of the same image to my document via the
>>> <image> , and add a actionListener to the group, only the first
>>> instance of the <image> reacts to the actionEvents.
>>
>>
>> Hmm, are you sure that both of the action listeners aren't being fired?
>> The problem is that currently we have one copy of the document linked to
>> two graphics trees. So Both image element bridges should be registering
>> action listeners on the root svg of the referenced SVG document.
>>
>> We should probably just have the ImageNode in the rendering tree
>> check it's outline and if the point is in the outline forward the event
>> as it is the event traverses down into the referenced image (which
>> allows
>> things like 'pointer-events' within the referenced image to function
>> properly.
>>
>>
>>> How can I have duplicate references to the same image inside my SVG,
>>> but that behave as individual instances to the EventListener? (I am
>>> using a JSVGCanvas to represent the document)
>>> For instance, i want tyhis image
>>> *xlink:href="../equipment/aircraftSpruce/M07TACH.svg" uid="OMU_93",
>>> and the same one, with uid="OMU_93_2" *to be placed on different
>>> loations on the canvas, and to react individually to the
>>> MouseEvents. Each is placed in its own Element.
>>> I am aware that perhaps this is an SVG related issue, but any head
>>> start would be truly appreciated,
>>> Andres.
>>> Abstract of the Element constructor:
>>> String svgNS = "http://www.w3.org/2000/svg";
>>> String xlinkNS = "http://www.w3.org/1999/xlink";
>>> Element img = document.createElementNS(svgNS, "image");
>>> img.setAttributeNS(null, "x", x.toString());
>>> img.setAttributeNS(null, "y", y.toString());
>>> img.setAttributeNS(null, "width", width.toString());
>>> img.setAttributeNS(null, "height", hgt.toString());
>>> img.setAttributeNS(xlinkNS,"xlink:href", image);
>>> img.setAttribute("uid", uid);
>>> imgGroup.add(img);
>>> Sample of my SVG Document (extracted from the dynamic document via
>>> DOMUtilities.writeDocument(doc, writer)).
>>> <g style="none" id="imgGroup">
>>> <rect x="0.0" y="0.0" width="3314" style="fill-rule:nonzero;clip-
>>> rule:nonzero;fill:none;stroke:none;stroke-width:0;stroke-
>>> linecap:round;stroke-linejoin:round;stroke-miterlimit:4;"
>>> uid="buffer" height="1574" pointer-events="fill"/><image x="1576.0"
>>> y="694.0" width="162.0" xmlns:xlink="http://www.w3.org/1999/xlink"
>>> xlink:href="../equipment/aircraftSpruce/M04TACH.svg"
>>> xlink:type="simple" uid="OMU_92" xlink:actuate="onRequest"
>>> height="162.0" preserveAspectRatio="xMidYMid meet"
>>> xlink:show="replace"/>
>>> <image x="1578.0" y="883.0" width="162.0"
>>> xmlns:xlink="http://www.w3.org/1999/xlink"
>>> *xlink:href="../equipment/aircraftSpruce/M07TACH.svg"*
>>> xlink:type="simple" *uid="OMU_93"* xlink:actuate="onRequest"
>>> height="162.0" preserveAspectRatio="xMidYMid meet"
>>> xlink:show="replace"/>
>>> <image x="1578.0" y="883.0" width="162.0"
>>> xmlns:xlink="http://www.w3.org/1999/xlink"
>>> *xlink:href="../equipment/aircraftSpruce/M07TACH.svg"*
>>> xlink:type="simple" *uid="OMU_93_2"* xlink:actuate="onRequest"
>>> height="162.0" preserveAspectRatio="xMidYMid meet"
>>> xlink:show="replace"/>
>>> <image x="1541.0" y="444.0" width="225.0"
>>> xmlns:xlink="http://www.w3.org/1999/xlink"
>>> xlink:href="../equipment/aircraftSpruce/20KSALT.svg"
>>> xlink:type="simple" uid="OMU_75" xlink:actuate="onRequest"
>>> height="225.0" preserveAspectRatio="xMidYMid meet"
>>> xlink:show="replace"/>
>>> </g>
>>
>>
>>
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
>> For additional commands, e-mail: batik-users-help@xml.apache.org
>>
>>
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
> For additional commands, e-mail: batik-users-help@xml.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-users-help@xml.apache.org
Re: Duplicate image references in SVG
Posted by Andres Toussaint <an...@onemileup.com>.
Both Actions Listeners DO get fired, so it is up to my code to
determine which of the duplicates is triggering the event, right?
If this is so, Is there a place in Batik i can intercept the Event to
kill those not wanted, and only propagate the one i want?
Thanks in advance.
Andres.
On Thursday, October 2, 2003, at 10:36 AM, Thomas DeWeese wrote:
> Andres Toussaint wrote:
>> Hi All,
>> When I add two instances of the same image to my document via the
>> <image> , and add a actionListener to the group, only the first
>> instance of the <image> reacts to the actionEvents.
>
> Hmm, are you sure that both of the action listeners aren't being fired?
> The problem is that currently we have one copy of the document linked
> to
> two graphics trees. So Both image element bridges should be
> registering
> action listeners on the root svg of the referenced SVG document.
>
> We should probably just have the ImageNode in the rendering tree
> check it's outline and if the point is in the outline forward the event
> as it is the event traverses down into the referenced image (which
> allows
> things like 'pointer-events' within the referenced image to function
> properly.
>
>
>> How can I have duplicate references to the same image inside my SVG,
>> but that behave as individual instances to the EventListener? (I am
>> using a JSVGCanvas to represent the document)
>> For instance, i want tyhis image
>> *xlink:href="../equipment/aircraftSpruce/M07TACH.svg" uid="OMU_93",
>> and the same one, with uid="OMU_93_2" *to be placed on different
>> loations on the canvas, and to react individually to the MouseEvents.
>> Each is placed in its own Element.
>> I am aware that perhaps this is an SVG related issue, but any head
>> start would be truly appreciated,
>> Andres.
>> Abstract of the Element constructor:
>> String svgNS = "http://www.w3.org/2000/svg";
>> String xlinkNS = "http://www.w3.org/1999/xlink";
>> Element img = document.createElementNS(svgNS, "image");
>> img.setAttributeNS(null, "x", x.toString());
>> img.setAttributeNS(null, "y", y.toString());
>> img.setAttributeNS(null, "width", width.toString());
>> img.setAttributeNS(null, "height", hgt.toString());
>> img.setAttributeNS(xlinkNS,"xlink:href", image);
>> img.setAttribute("uid", uid);
>> imgGroup.add(img);
>> Sample of my SVG Document (extracted from the dynamic document via
>> DOMUtilities.writeDocument(doc, writer)).
>> <g style="none" id="imgGroup">
>> <rect x="0.0" y="0.0" width="3314"
>> style="fill-rule:nonzero;clip-
>> rule:nonzero;fill:none;stroke:none;stroke-width:0;stroke-
>> linecap:round;stroke-linejoin:round;stroke-miterlimit:4;"
>> uid="buffer" height="1574" pointer-events="fill"/><image x="1576.0"
>> y="694.0" width="162.0" xmlns:xlink="http://www.w3.org/1999/xlink"
>> xlink:href="../equipment/aircraftSpruce/M04TACH.svg"
>> xlink:type="simple" uid="OMU_92" xlink:actuate="onRequest"
>> height="162.0" preserveAspectRatio="xMidYMid meet"
>> xlink:show="replace"/>
>> <image x="1578.0" y="883.0" width="162.0"
>> xmlns:xlink="http://www.w3.org/1999/xlink"
>> *xlink:href="../equipment/aircraftSpruce/M07TACH.svg"*
>> xlink:type="simple" *uid="OMU_93"* xlink:actuate="onRequest"
>> height="162.0" preserveAspectRatio="xMidYMid meet"
>> xlink:show="replace"/>
>> <image x="1578.0" y="883.0" width="162.0"
>> xmlns:xlink="http://www.w3.org/1999/xlink"
>> *xlink:href="../equipment/aircraftSpruce/M07TACH.svg"*
>> xlink:type="simple" *uid="OMU_93_2"* xlink:actuate="onRequest"
>> height="162.0" preserveAspectRatio="xMidYMid meet"
>> xlink:show="replace"/>
>> <image x="1541.0" y="444.0" width="225.0"
>> xmlns:xlink="http://www.w3.org/1999/xlink"
>> xlink:href="../equipment/aircraftSpruce/20KSALT.svg"
>> xlink:type="simple" uid="OMU_75" xlink:actuate="onRequest"
>> height="225.0" preserveAspectRatio="xMidYMid meet"
>> xlink:show="replace"/>
>> </g>
>
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
> For additional commands, e-mail: batik-users-help@xml.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-users-help@xml.apache.org
Re: Duplicate image references in SVG
Posted by Thomas DeWeese <Th...@Kodak.com>.
Andres Toussaint wrote:
> Hi All,
>
> When I add two instances of the same image to my document via the
> <image> , and add a actionListener to the group, only the first instance
> of the <image> reacts to the actionEvents.
Hmm, are you sure that both of the action listeners aren't being fired?
The problem is that currently we have one copy of the document linked to
two graphics trees. So Both image element bridges should be registering
action listeners on the root svg of the referenced SVG document.
We should probably just have the ImageNode in the rendering tree
check it's outline and if the point is in the outline forward the event
as it is the event traverses down into the referenced image (which allows
things like 'pointer-events' within the referenced image to function
properly.
> How can I have duplicate references to the same image inside my SVG, but
> that behave as individual instances to the EventListener? (I am using a
> JSVGCanvas to represent the document)
>
> For instance, i want tyhis image
> *xlink:href="../equipment/aircraftSpruce/M07TACH.svg" uid="OMU_93", and
> the same one, with uid="OMU_93_2" *to be placed on different loations on
> the canvas, and to react individually to the MouseEvents. Each is placed
> in its own Element.
>
> I am aware that perhaps this is an SVG related issue, but any head start
> would be truly appreciated,
>
> Andres.
>
> Abstract of the Element constructor:
> String svgNS = "http://www.w3.org/2000/svg";
> String xlinkNS = "http://www.w3.org/1999/xlink";
> Element img = document.createElementNS(svgNS, "image");
> img.setAttributeNS(null, "x", x.toString());
> img.setAttributeNS(null, "y", y.toString());
> img.setAttributeNS(null, "width", width.toString());
> img.setAttributeNS(null, "height", hgt.toString());
> img.setAttributeNS(xlinkNS,"xlink:href", image);
> img.setAttribute("uid", uid);
> imgGroup.add(img);
>
> Sample of my SVG Document (extracted from the dynamic document via
> DOMUtilities.writeDocument(doc, writer)).
>
> <g style="none" id="imgGroup">
> <rect x="0.0" y="0.0" width="3314"
> style="fill-rule:nonzero;clip-rule:nonzero;fill:none;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;"
> uid="buffer" height="1574" pointer-events="fill"/><image x="1576.0"
> y="694.0" width="162.0" xmlns:xlink="http://www.w3.org/1999/xlink"
> xlink:href="../equipment/aircraftSpruce/M04TACH.svg" xlink:type="simple"
> uid="OMU_92" xlink:actuate="onRequest" height="162.0"
> preserveAspectRatio="xMidYMid meet" xlink:show="replace"/>
>
> <image x="1578.0" y="883.0" width="162.0"
> xmlns:xlink="http://www.w3.org/1999/xlink"
> *xlink:href="../equipment/aircraftSpruce/M07TACH.svg"*
> xlink:type="simple" *uid="OMU_93"* xlink:actuate="onRequest"
> height="162.0" preserveAspectRatio="xMidYMid meet" xlink:show="replace"/>
>
> <image x="1578.0" y="883.0" width="162.0"
> xmlns:xlink="http://www.w3.org/1999/xlink"
> *xlink:href="../equipment/aircraftSpruce/M07TACH.svg"*
> xlink:type="simple" *uid="OMU_93_2"* xlink:actuate="onRequest"
> height="162.0" preserveAspectRatio="xMidYMid meet" xlink:show="replace"/>
>
> <image x="1541.0" y="444.0" width="225.0"
> xmlns:xlink="http://www.w3.org/1999/xlink"
> xlink:href="../equipment/aircraftSpruce/20KSALT.svg" xlink:type="simple"
> uid="OMU_75" xlink:actuate="onRequest" height="225.0"
> preserveAspectRatio="xMidYMid meet" xlink:show="replace"/>
> </g>
---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-users-help@xml.apache.org