Here's an oversimplified example.... it has embedded javascript, but the calls are virtually the same. You'll need to merge the new translate with the existing transform in more complex applications .
Hope it helps <?xml version="1.0" encoding="UTF-8" standalone="no" ?> <svg version="1.1" width="100%" height="100%" xmlns=" http://www.w3.org/2000/svg"; onload="init()" pointer-events="all"> <script type="text/ecmascript"> <![CDATA[ var drag = false; var svg; var draggable; function init(e) { svg = document.documentElement; var rect = document.getElementById("draggable"); rect.addEventListener("mousedown", md, false); svg.addEventListener("mousemove", mm, false); svg.addEventListener("mouseup", mu, false); } function md(e) { drag = true; draggable = e.currentTarget; } function mu(e) { drag = false; } function mm(e) { if (drag) { var p = getPoint(e); var m = svg.createSVGMatrix().translate(p.x, p.y); var transform = "matrix(" + m.a + " " + m.b + " " + m.c + " " + m.d + " " + m.e + " " + m.f + ")"; draggable.setAttributeNS(null, "transform", transform); } } function getPoint(e) { var p = svg.createSVGPoint(); p.x = e.clientX; p.y = e.clientY; p = p.matrixTransform(svg.getScreenCTM().inverse()); return p; } ]]> </script> <rect id="background" x="0" y="0" width="100%" height="100%" fill="#BBB" stroke="#000" /> <rect id="draggable" x="0" y="0" height="100" width="100" fill="cornflowerblue"/> </svg> On Tue, Aug 31, 2010 at 2:11 PM, shootist <kwilson4...@gmail.com> wrote: > > An example would be great. I'm very new to svg and batik (I just started > using it), and there are a number of things I need to implement if it's > even > possible. I managed to get a movable element working last night, but I'm > positive it's not the best implementation possible. > > How would you suggest setting the location of the elements? I need to > translate the on screen coordinates to and from a real world coordinate > system using ratios so I will need access to some sort of concrete > coordinate. > > As for the translation, I found some code that does it differently. Is > there a down side to this compared to your suggestion? > > SVGOMPoint pt = new SVGOMPoint(e.getX(), e.getY()); > SVGMatrix mat = this.getSVGDocument().getRootElement().getScreenCTM(); // > elem -> screen > mat = mat.inverse(); // screen -> elem > pt = (SVGOMPoint) pt.matrixTransform(mat); > > Again, thank you for the help. > > > > jonathan wood-3 wrote: > > > > I've always had alot of success adding my draggable Elements to a parent > > <g> > > with pointer-events="all". Place the mousemove listener on the > containing > > <g>. If you capture the point in mousedown (p1), you can use p1 and the > > mousemove point (p2, likely transformed to the correct coord system) to > > determine the appropriate transform to apply > > (AffineTransform.getTranslateInstace(p2.x - p1.x, p2.y - p1.y)). > > > > I'd caution you against trying to use absolute x,y attribute sets as this > > approach is not feasible in complex implementations. (Just in case your > on > > that path...) > > > > I can likely provide an example in short order if you want a spoiler > > > > On Mon, Aug 30, 2010 at 11:05 AM, shootist <kwilson4...@gmail.com> > wrote: > > > >> > >> I tried finding a post here with a similar issue but had no luck. I am > >> attempting to create movable icons using an image element. > >> > >> If I add the event listener directly to the image element, it does work > >> but > >> if you move the mouse fast, you of course get outside the element and > >> lose > >> the listener (painting can not keep up with the events). > >> > >> If I add the event listener to the root element, and check for the > >> element > >> type, it managed to find the type of elements I want and change the > >> cursor > >> on mouseover like it should. But, it will not move the element. > >> > >> Troubleshooting > >> One interesting thing I noticed, is when I print ((Element) > >> evt.getCurrentTarget()).getTagName() I get svg when the listener is > added > >> to > >> the root, and image when the listener is added to the image element > only. > >> This would make sense to me if I wasn't able to distinguish between > >> elements > >> and only mouse over on the image elements (I added a tag called movable > >> and > >> can check that the element has that tag and only change the cursor for > >> those > >> elements). > >> > >> Any ideas as to what I'm doing wrong? Or is there a better way to > create > >> movable elements? Thanks in advance for any help. > >> > >> -- > >> View this message in context: > >> > http://old.nabble.com/Movable-elements-and-events-tp29573506p29573506.html > >> Sent from the Batik - Users mailing list archive at Nabble.com. > >> > >> > >> --------------------------------------------------------------------- > >> To unsubscribe, e-mail: batik-users-unsubscr...@xmlgraphics.apache.org > >> For additional commands, e-mail: > batik-users-h...@xmlgraphics.apache.org > >> > >> > > > > > > -- > View this message in context: > http://old.nabble.com/Movable-elements-and-events-tp29573506p29586021.html > Sent from the Batik - Users mailing list archive at Nabble.com. > > > --------------------------------------------------------------------- > To unsubscribe, e-mail: batik-users-unsubscr...@xmlgraphics.apache.org > For additional commands, e-mail: batik-users-h...@xmlgraphics.apache.org > >
